css实现元素垂直居中的常用方法(总结)

下面我来详细讲解“CSS实现元素垂直居中的常用方法(总结)”。

方法一：使用flex布局

使用flex布局是最为常见的一种方法，它使用display: flex将父元素变成flex容器，然后使用align-items: center将子元素垂直居中。以下是示例代码：

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

.box {
  width: 100px;
  height: 100px;
  background-color: red;
}

<div class="container">
  <div class="box"></div>
</div>

方法二：使用绝对定位

使用绝对定位也是一种常见的方法。它的原理是通过将子元素进行绝对定位，并将left和top属性都设置为50%，然后再通过将margin-left和margin-top属性都设置为子元素宽度和高度的一半来将子元素定位在父元素中心位置。以下是示例代码：

.container {
  height: 300px;
  position: relative;
}

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

<div class="container">
  <div class="box"></div>
</div>

除了以上两种方法以外，还有一些其他的方法，比如使用translate属性、使用表格布局等等，但这两种方法已经足够解决大部分的垂直居中问题了。