爲什麼我的疊加DIV不居中

我在失去了對如何中心（水平和垂直）的覆蓋其父。請參閱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/

再次感謝您的加盟Ë！

來源

2014-09-28 Little Brother

有你的HTML無效的標記：

– 2014-09-28 20:51:52

我surpri在堆棧溢出中詢問同一問題的次數以及人們仍然問它的次數。它在發佈之前證明幾乎沒有研究。如果你在谷歌上搜索「堆棧溢出中心元素垂直和水平」（沒有引號），你會得到超過150萬的結果！這將花費更少的時間發佈的問題，並創建小提琴...聳聳肩 – 2014-09-28 21:11:41

這是一個完全不同的問題恕我直言！ – 2014-09-28 23:52:58

使用transform:translate(-50%, -50%)居中父中的元素（而不是爲上邊距和保證金左硬編碼值）：

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

來源

2014-09-28 21:01:31

感謝您的幫助和您的意見。我需要在其父項中垂直居中的疊加層。有什麼建議麼？ – 2014-09-29 14:13:16

我很感謝您的幫助！ – 2014-09-29 14:15:05

@LittleBrother：將'position：relative;'添加到父級，並在疊加層中添加指定的'transform：translate（-50％，-50％）;'，它將起作用。修正了JSFiddle（我意識到存在一些無效的樣式：'posttion：relative;'或'verflow：hidden;'），現在它的工作方式如下：http://jsfiddle.net/aj7udvsq/6/ – 2014-09-29 14:23:34

看在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; 
}

來源

2014-09-28 21:00:52

我需要在其父項中垂直居中的覆蓋層。我一直在努力與「居中」元素 – 2014-09-29 14:14:21

爲什麼我的疊加DIV不居中

回答

相關問題