本文目錄導(dǎo)讀：

1. 使用Flex布局
2. 使用Grid布局

CSS實(shí)現(xiàn)元素垂直居中的多種方法

在網(wǎng)頁(yè)設(shè)計(jì)中，我們經(jīng)常需要將某個(gè)元素在容器內(nèi)垂直居中，這看似簡(jiǎn)單，但如果不熟悉CSS的技巧和特性，可能會(huì)遇到一些挑戰(zhàn)，本文將介紹幾種常用的方法來(lái)實(shí)現(xiàn)元素的垂直居中。

使用Flex布局

Flex布局是現(xiàn)代CSS布局的一種強(qiáng)大工具，可以輕松實(shí)現(xiàn)元素的垂直居中，只需將父元素設(shè)置為flex容器，然后使用align-items: center和justify-content: center屬性即可。

.parent {
  display: flex;
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中（如果需要） */
}

使用Grid布局

Grid布局是另一種現(xiàn)代CSS布局方法，同樣可以實(shí)現(xiàn)元素的垂直居中，將父元素設(shè)置為grid容器，然后使用align-content或justify-content屬性。

.parent {
  display: grid;
  align-content: center;  /* 垂直居中 */
}

四、使用position和transform屬性

對(duì)于未知高度的容器，我們可以使用position和transform屬性來(lái)實(shí)現(xiàn)元素的垂直居中，這種方法的基本思路是將元素相對(duì)于自身進(jìn)行定位，然后向上移動(dòng)其自身高度的一半。

.child {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

五、使用CSS的display:table和vertical-align屬性

我們還可以利用CSS的表格顯示屬性來(lái)實(shí)現(xiàn)垂直居中，將父元素設(shè)置為表格（display:table），然后將子元素設(shè)置為表格單元格（display:table-cell），并使用vertical-align:middle屬性。

.parent {
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;  /* 垂直居中 */
}

就是幾種常見(jiàn)的實(shí)現(xiàn)元素垂直居中的方法，各有其適用場(chǎng)景和優(yōu)缺點(diǎn)，在實(shí)際開(kāi)發(fā)中，可以根據(jù)具體情況選擇合適的方法。