为啥我的覆盖 div 不居中 [重复]

Posted

技术标签:

【中文标题】为啥我的覆盖 div 不居中 [重复]【英文标题】:Why my overlay div is not centering [duplicate]为什么我的覆盖 div 不居中 [重复] 【发布时间】:2014-11-23 05:36:30 【问题描述】:

我相信这对专业人士来说是一个“简单的”:

我不知道如何将 叠加层 居中(水平和垂直)到其父级。有关详细信息,请参阅 jsfiddle 链接。

提前感谢您的宝贵时间...

磅数

<div class="grandparent">
    <div class="parent">
        <!-- 1st row */ -->
        <div class="child">1-1</div>
        <div class="child">1-2</div>
        <div class="child">1-3</div>

        <!-- 2nd row */ -->
        <div class="child">2-1</div>
        <div class="child">2-2</div>
        <div class="child">2-3</div>

        <!-- 3rd row */ -->
        <div class="child">3-1</div>
        <div class="child">3-2</div>
        <div class="child">3-3</div>


        <div class="overlay">
            Overlaysdfds 
            line2sdf sdfdsf sdfsdf sfdsdf
            <P />line 3
         </div> 

    </div>


</div>   

和 CSS:

<style>
.grandparent 
    posttion: relative;
    height: 100%;
    width:100%;
    max-width:600px;

    margin: 0 auto;
    text-align:center;
    border: 1px solid green;
    overflow: hidden;


.parent 
    width: 75%;
    height: 75%;
    margin: auto;
    border: 1px solid blue;
    text-align: center;
    padding:20px;
    verflow:hidden;

.parent:after 
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;

.child 
    posttion: relative;
    float:left;
    width: 30%;
    padding-bottom: 22%; 
    margin:1.66%;
    background-color: #1E1E1E;
    color: #ffffff;


.overlay 
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -150px;
    margin-top:-100px;
    color: white; background: #666666; opacity: .8;
    z-index: 1000;

<style>

这是示例的链接

http://jsfiddle.net/lb6688/aj7udvsq/3/

再次感谢您的宝贵时间!!!

【问题讨论】:

您的 html 中有无效标记:

我对在 Stack Overflow 上被问到同样问题的次数以及人们仍然如何问它的次数感到惊讶。在发布之前证明几乎没有研究。如果你在谷歌上搜索“垂直和水平堆栈溢出中心元素”(不带引号),你会得到超过 150 万个结果!而且发布问题和创建小提琴会花费更少的时间......耸耸肩 这是一个完全不同的问题恕我直言!!! 有什么不同?您为此问题获得的答案适用于您的问题,它们与 Hashem 建议的问题中的答案相同(例如:***.com/a/25776315/3695983)。你的代码可能不同,但问题的本质是完全一样的。 我明白你的意思。谢谢,下次我会努力的:) 【参考方案1】:

查看 CSS 处的更改:http://jsfiddle.net/csdtesting/w4boh5mg/1/

.overlay 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);    
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
    color: white; background: #666666; opacity: .8;


  .parent 
    position: relative; /* or absolute */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;

【讨论】:

我需要垂直居中的覆盖在它的父级中。我一直在为“居中”元素而苦苦挣扎【参考方案2】:

使用transform:translate(-50%, -50%) 使父元素居中(而不是margin-top 和margin-left 的硬编码值):

.overlay 
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    color: white; background: #666666; opacity: .8;
    z-index: 1000;

在这里查看它的工作原理:http://jsfiddle.net/aj7udvsq/4/

【讨论】:

感谢您的帮助和您的 cmets。我需要在它的父级中垂直居中的叠加层。有什么建议吗? 非常感谢您的帮助!!! @LittleBrother:将position:relative; 与覆盖层中指示的transform:translate(-50%, -50%); 一起添加到父级,它将起作用。修复了 JSFiddle(我意识到有一些无效的样式:posttion: relative;verflow:hidden;),现在它可以正常工作了:jsfiddle.net/aj7udvsq/6 你太棒了!感谢您的时间和耐心!!!

以上是关于为啥我的覆盖 div 不居中 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

边距:自动;不垂直居中 div [重复]

我无法让 div 水平居中 [重复]

如何在其他div中垂直居中div [重复]

Flexbox - 垂直居中文本[重复]

垂直居中和居中对齐文本并为 div 添加边距?我迷路了[重复]

使div居中的正确方法[重复]