如何將 Div 垂直居中在百分比高度 Div 內？

百分比高度 Div 內的 Div 垂直對齊

將一個 div 垂直放置在另一個具有基於百分比高度的 div中可以成為網路中常見的挑戰

問題：是否可以在基於百分比的高度的 div 中垂直居中？

答案：可以，可以使用各種技術實現垂直居中。一個流行的方法是利用CSS 屬性display: table-cell 和vertical-align: middle.

透過設定display: table-cell在內層div上，它成為表格的元素並繼承表格單元格的屬性。然後，vertical-align: middle 屬性會在表格內垂直對齊單元格。

例如，請考慮以下程式碼：

.parent-div {
  height: 50%;
}

.child-div {
  display: table-cell;
  vertical-align: middle;
}

在此範例中， child-div 將在parent-div 內垂直居中，其比例為50%

需要注意的是，雖然此方法適用於大多數瀏覽器，但Internet Explorer 6 不支援 display: table-cell 屬性。因此，對於 IE6，可能需要考慮替代方法或跨瀏覽器相容性解決方案。

以上是如何將 Div 垂直居中在百分比高度 Div 內？的詳細內容。更多資訊請關注PHP中文網其他相關文章！