Css 为什么我的叠加div没有居中

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

我不知道如何将覆盖层居中（水平和垂直）到其父层。有关详细信息，请参阅JSFIDLE链接

提前感谢您抽出时间

磅

---

再次感谢你的时间

看看CSS的变化：

---

使用

transform:translate（-50%，-50%）

将元素居中放置在父元素中（而不是硬编码页边距顶部和页边距左侧的值）：

---

看到它在这里工作了吗：

你的html中有无效的标记：

我很惊讶，在堆栈溢出问题上同样的问题被问了很多次，而且人们仍然问这个问题。事实证明，在发布之前几乎没有任何研究。如果你在谷歌上搜索“stack overflow center element垂直和水平”（不带引号），你会得到150多万条搜索结果！而且发布问题和制作小提琴所花费的时间也会更少。。。耸耸肩这是一个完全不同的问题，我想！！！有何不同？你得到的这个问题的答案适用于你的问题，它们与哈希姆提出的问题中的答案相同（例如：）。你的代码可能不同，但问题的本质是完全相同的。我明白你的意思。谢谢，下次我会更加努力：）谢谢你的帮助和评论。我需要覆盖层垂直居中于其父对象。有什么建议吗？我非常感谢你的帮助@LittleBrother:添加

位置：相对与指定的
转换一起传递给父级：translate（-50%，-50%）在覆盖中，它将工作。修复了JSFIDLE（我意识到有一些无效的样式：
postion:relative；
或
verflow:hidden；
），现在它的工作方式应该是：你太棒了！谢谢你的时间和耐心！！！我需要覆盖层垂直居中于其父对象。我总是与“居中”元素作斗争
<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>   

<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/

.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;
}

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