這是死亡居中div的最有效方法嗎？

#outer { 
    display:table; 
    position:absolute; 
    height:100%; 
    width:100%; 
} 
#middle { 
    display:table-cell; 
    vertical-align:middle; 
} 
#inner { 
    margin:50px auto 50px auto; 
    width:600px; 
} 

<body> 
    <div id="outer"> 
     <div id="middle"> 
      <div id="inner"> 
       dead centered onto screen 
      </div> 
     </div> 
    </div> 
</body>

這是死鎖在屏幕中間的最有效率或接受的方式嗎？我問，因爲使用表格除了表格數據，尤其是構建界面的數據，都是如此的令人不悅。這是死亡居中div的最有效方法嗎？

來源

2015-11-01 sconewolf

什麼是死的中心，它是如何從正常中心有什麼不同？ – Aziz

因爲英文，所以就是阿齊茲。 – sconewolf

意見基礎和如此題外話題。無論如何，重複的http://stackoverflow.com/questions/19339958/is-there-a-more-efficient-way-to-center-an-image-inside-a-floated-div?rq=1 –

那麼，有第二種方法....嘗試：margin-left:auto; margin-right:auto;

來源

2015-11-01 19:40:51

Dat垂直對齊doe。 – sconewolf

使用CSS變換或Flexbox的。

選項1：CSS（2D）轉換。Global support: 90.8%。訣竅是將元素從頂部和左側放置50％，並在相反的方向上將它自己的尺寸偏移一半。這種方法唯一的缺點是可能由於子像素轉換而導致模糊文本渲染。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    background-color: #eee; 
 
    min-height: 100vh; 
 
    width: 100%; 
 
    position: relative; 
 
} 
 
.wrapper > .content { 
 
    background-color: #ddd; 
 
    padding: 10px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
}

<div class="wrapper"> 
 
    <div class="content">Centered</div> 
 
</div>

選項2：CSS Flexbox的。Complete global support: 82.81%。與CSS轉換相比，瀏覽器支持一點補丁，但涉及的線較少。訣竅是將align-items和justify-content都設置爲父元素的中心。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.wrapper { 
 
    background-color: #eee; 
 
    min-height: 100vh; 
 
    width: 100%; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.wrapper > .content { 
 
    background-color: #ddd; 
 
    padding: 10px; 
 
}

<div class="wrapper"> 
 
    <div class="content">Centered</div> 
 
</div>

來源

2015-11-01 19:53:11 Terry

選項1是一個有趣的選擇。如果選項1只有91％的全球支持，我的原始選項不會有更高的選項嗎？什麼瀏覽器不支持表？ – sconewolf

@The_Machine所有瀏覽器支持表（或基於表格的佈局），但注意到您需要三個級別的跳動。我的解決方案只需要兩個。 Divitis是危險的;） – Terry

不是3比2好？ = D – sconewolf

這是死亡居中div的最有效方法嗎？

回答

相關問題