为什么我的覆盖 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 建议的问题中的答案相同（例如：stackoverflow.com/a/25776315/3695983）。你的代码可能不同，但问题的本质是完全一样的。
我明白你的意思。谢谢，下次我会努力的:)

标签： css

【解决方案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
你太棒了！感谢您的时间和耐心！！！