纯CSS实现垂直居中的9种方法

1. 使用flex布局

Flex布局是CSS3引入的一种新布局方式，它能够轻松实现垂直居中。使用Flex布局，只需将父元素的 display 属性设置为 flex，然后使用 align-items 属性将子元素居中。

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

2. 使用表格布局

表格布局是CSS提供的一种传统布局方式，可以实现垂直居中。使用表格布局，将父元素的 display 属性设置为 table，然后将子元素包裹在一个表格单元格中。

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

3. 使用绝对定位和负margin

使用绝对定位和负margin可以实现垂直居中。首先，将父元素设置为相对定位，然后将子元素设置为绝对定位，并使用负margin将其居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. 使用绝对定位和calc()

使用绝对定位和calc()函数可以实现垂直居中。首先，将父元素设置为相对定位，然后将子元素设置为绝对定位，并使用calc()函数将其居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: calc(50% - 50px);
}

5. 使用行内块元素和vertical-align

使用行内块元素和vertical-align属性可以实现垂直居中。将父元素设置为相对定位，将子元素设置为行内块元素，并使用vertical-align属性将其居中。

.parent {
  position: relative;
}
.child {
  display: inline-block;
  vertical-align: middle;
}

6. 使用绝对定位和transform

使用绝对定位和transform可以实现垂直居中。将父元素设置为相对定位，将子元素设置为绝对定位，并使用transform将其居中。

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

7. 使用flex布局和margin: auto

使用flex布局和margin: auto可以实现垂直居中。将父元素的display属性设置为flex，并将margin属性设置为auto。

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

8. 使用伪元素

使用伪元素可以实现垂直居中。将父元素设置为相对定位，然后使用绝对定位和伪元素将子元素居中。

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

9. 使用grid布局

使用grid布局可以实现垂直居中。将父元素的display属性设置为grid，并使用justify-items和align-items属性将子元素居中。

.parent {
  display: grid;
  justify-items: center;
  align-items: center;
}

以上是9种使用纯CSS实现垂直居中的方法，通过不同的布局方式和属性的组合，我们可以实现不同的垂直居中效果。选择合适的方法取决于具体的布局需求和浏览器支持情况。希望这些方法能对你有所帮助！