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

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

CSS布局技巧：實(shí)現(xiàn)元素的垂直居中

在網(wǎng)頁(yè)設(shè)計(jì)中，元素的垂直居中是一個(gè)常見(jiàn)的需求，雖然實(shí)現(xiàn)方式多種多樣，但我們需要找到一種簡(jiǎn)潔且兼容性強(qiáng)的方法，本文將介紹在CSS中如何實(shí)現(xiàn)元素的垂直居中，而不專門討論圖片。

使用CSS Flexbox布局

Flexbox布局提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)垂直居中元素，只需將父元素的display屬性設(shè)置為flex，然后使用align-items: center和justify-content: center即可實(shí)現(xiàn)水平和垂直居中。

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  height: 100vh; /* 設(shè)置父元素高度 */
}

使用CSS Grid布局

CSS Grid布局同樣可以實(shí)現(xiàn)元素的垂直居中，將父元素設(shè)置為grid，然后使用align-content: center即可。

.parent {
  display: grid;
  align-content: center; /* 垂直居中 */
  height: 100vh; /* 設(shè)置父元素高度 */
}

三、使用position和transform屬性

對(duì)于不占滿全屏的元素，還可以使用position和transform屬性來(lái)實(shí)現(xiàn)垂直居中，將父元素設(shè)置為相對(duì)定位（relative），然后將子元素設(shè)置為***定位（absolute），并使用top: 50%和transform: translateY(-50%)來(lái)垂直居中。

.parent {
  position: relative; /* 相對(duì)定位 */
}
.child {
  position: absolute; /* ***定位 */
  top: 50%; /* 元素頂部位于父元素中間位置 */
  transform: translateY(-50%); /* 將元素向上移動(dòng)自身高度的一半 */
}

就是幾種常見(jiàn)的在CSS中實(shí)現(xiàn)元素垂直居中的方法，在實(shí)際應(yīng)用中，可以根據(jù)具體需求和場(chǎng)景選擇合適的方法。