CSS 垂直居中盒子的方法

在CSS中，垂直居中盒子是一個常見的問題，但實現(xiàn)起來并不困難，下面是一些實現(xiàn)垂直居中盒子的方法。

1、使用 Flexbox 布局

Flexbox 是一種現(xiàn)代的布局方式，可以輕松實現(xiàn)垂直居中，只需將盒子設置為 flex 容器，并使用 align-items 屬性將其子元素垂直居中即可。

.container {
  display: flex;
  align-items: center;
}

2、使用 Grid 布局

Grid 布局是另一種現(xiàn)代布局方式，同樣可以實現(xiàn)垂直居中，只需將盒子設置為 grid 容器，并使用 align-content 屬性將其子元素垂直居中即可。

.container {
  display: grid;
  align-content: center;
}

3、使用 Position ***定位

將盒子設置為相對定位，并將其子元素設置為***定位，可以使用 top 和 bottom 屬性實現(xiàn)垂直居中。

.container {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  bottom: 50%;
}

4、使用 Transform 變換

將盒子設置為一個 flex 容器，并使用 transform 屬性將其子元素向下移動 50%，可以實現(xiàn)垂直居中。

.container {
  display: flex;
}
.child {
  transform: translateY(-50%);
}

是幾種實現(xiàn)垂直居中盒子的方法，可以根據(jù)具體需求選擇適合的方法。