如何垂直對齊容器 div 內的元素？

容器 Div 內的垂直元素對齊

您打算在容器 div 內垂直對齊兩個元素。 phrogz.net 上的教學並沒有產生預期的結果。本文探討了兩種實現垂直對齊的有效方法。

使用 CSS Flexbox 的方法：

CSS Flexbox 提供了一種有效的垂直居中元素的方法：

容器{

display: flex; 
flex-direction: column; 
justify-content: center; 
align-items: center; 
height: 300px;

}

將flex-direction 設定為'column' 時，專案垂直堆疊，而'justify-content: center' 和'align -items: center' 分別確保垂直和水平居中。

使用CSS Table 和定位：

此方法涉及利用表格屬性和絕對定位：

<br>body {<pre class="brush:php;toolbar:false">display: table;
position: absolute;
height: 100%;
width: 100%;

}

容器{

display: table-cell;
vertical-align: middle;

}

這裡，body元素設定為表格，容器元素設定為表格儲存格。將 'vertical-align' 設為 'middle' 可以使容器在主體內垂直對齊。

選擇哪種方法：

為了簡單和高效，Flexbox建議使用，特別是因為它具有廣泛的佈局選項和響應式特性。 Flexbox 也得到了瀏覽器的廣泛支持，除了舊版的 IE。

以上是如何垂直對齊容器 div 內的元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！