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

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

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

使用Flex布局

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

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

使用CSS Grid布局

CSS Grid布局是另一種強(qiáng)大的布局工具，同樣可以輕松實(shí)現(xiàn)元素的垂直居中，將父元素設(shè)置為grid，然后使用align-content屬性即可實(shí)現(xiàn)垂直居中。

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

三、使用position和transform屬性

對(duì)于沒有使用Flex或Grid布局的場(chǎng)合，我們還可以使用position和transform屬性來實(shí)現(xiàn)元素的垂直居中，將父元素設(shè)置為相對(duì)定位（relative），然后將子元素設(shè)置為***定位（absolute），并通過top、bottom、left和right屬性將其位置設(shè)置為0，然后使用transform屬性進(jìn)行微調(diào)。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

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