CSS 垂直居中布局：5 种方法详解

实现垂直居中布局的 5 种方法

本文将介绍 5 种常见的 CSS 垂直居中布局方法，并提供代码示例，助您轻松实现元素垂直居中效果。

1. 使用 flex 布局

使用 flex 布局可以轻松实现垂直居中，只需要将父元素设置为 display: flex，并设置 align-items: center 即可。

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

2. 使用表格布局

使用表格布局也可以实现垂直居中，只需要将父元素设置为 display: table，并将子元素设置为 display: table-cell 和 vertical-align: middle 即可。

.container {
  display: table;
}

.content {
  display: table-cell;
  vertical-align: middle;
}

3. 使用绝对定位和 transform

将子元素设置为绝对定位，然后使用 transform 属性来将其垂直居中。具体方法是将 top 和 bottom 属性都设置为 0，并将 margin 属性设置为 auto。

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

4. 使用 line-height 属性

将父元素设置为固定高度，并将 line-height 属性设置为相同的值，就可以实现子元素垂直居中。注意，这种方法只适用于单行文本的情况。

.container {
  height: 100px;
  line-height: 100px;
}

5. 使用 grid 布局

使用 grid 布局也可以实现垂直居中，只需要将父元素设置为 display: grid，并使用 align-items: center 即可。

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

以上 5 种方法都可以实现垂直居中布局，选择哪种方法取决于您的具体需求和场景。