對於前端開發人員來說，水平居中相對來說是比較簡單的，但是垂直居中卻是比較棘手的問題。在這篇文章中，我們將會討論 HTML 中如何垂直居中元素。
一般來說，有許多種方法可以垂直居中一個 HTML 元素。下面，我們來探究其中的幾種方法。
Flexbox（彈性盒子佈局）是 CSS3 最新的佈局方式之一，是一種使用極其方便的居中方式。 Flexbox 的主要想法是，在容器中建立一個彈性伸縮盒子，然後透過控制彈性盒子的屬性來實現水平、垂直居中。下面我們來看看如何使用Flexbox 實作垂直居中：
HTML 程式碼：
我是要居中的元素
CSS 程式碼：
.container { height: 300px; display: flex; justify-content: center; align-items: center; } .child { width: 200px; height: 100px; background-color: #f8f8f8; }
在這個範例中，我們先為容器設定了一個高度，然後將容器的顯示方式設為Flexbox，並且使用justify-content 和align-items 屬性讓元素在垂直和水平方向上居中。值得注意的是，這個方法只適用於簡單的垂直居中。
絕對定位是比較常用的方法。使用絕對定位，可以讓一個元素相對於其父元素垂直居中。具體實作方式如下：
HTML 程式碼：
我是要居中的元素
CSS 程式碼：
.container { position: relative; height: 300px; } .child { position: absolute; top: 50%; transform: translateY(-50%); width: 200px; height: 100px; background-color: #f8f8f8; }
在這個例子中，我們先給容器設定了position: relative，然後為子元素設定position: absolute，並且把top 屬性設為50%。這樣子元素就垂直居中了。但是，這個元素的頂部還會有一段多餘的空白。為了消除這段空白，我們使用了 transform: translateY(-50%)，將其向上平移了一半的高度，使得元素正好垂直居中。
使用 table-cell 等效於將 HTML 元素轉換成了表格元素。 table-cell 可以實現簡單的水平、垂直居中，但相對來說比較笨重。下面我們來看看具體實作方法：
HTML 程式碼：
我是要居中的元素
CSS 程式碼：
.container { display: table; height: 300px; width: 100%; text-align: center; } .child { display: table-cell; vertical-align: middle; width: 200px; height: 100px; background-color: #f8f8f8; }
在這個範例中，我們先將容器的顯示方式設為table ，然後把容器的高度、寬度設定為我們想要的大小，text-align 設定為center（使其在水平方向上居中）。接著，我們將子元素的顯示方式設為 table-cell，並透過 vertical-align 屬性實現在垂直方向上的居中。
CSS Grid Layout 是一個強大的佈局方式，它可以讓我們迅速而有效地創建網格型佈局，包括水平和垂直居中。具體實作方式如下：
HTML 程式碼：
我是要居中的元素
CSS 程式碼：
.container { display: grid; height: 300px; place-items: center; } .child { width: 200px; height: 100px; background-color: #f8f8f8; }
在這個範例中，我們首先使用display: grid 將容器的顯示方式設為網格佈局。然後，我們使用 place-items 屬性，使其在水平和垂直方向上居中。由於這個方法還比較新，在瀏覽器相容性方面還不夠好。
在這篇文章中，我們探討了 HTML 中幾種常見的方法來實現垂直居中。這些方法各有優缺點，可依實際情況和需求選擇合適的方法。如果只是簡單的垂直居中，那麼使用 Flexbox 或絕對定位的方法是比較簡單而有效的，而對於更複雜的佈局，可以使用 CSS Grid Layout 來實現。
以上是html怎麼垂直居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！
