CSS 垂直居中的5种实现方法

下面是CSS垂直居中的五种实现方法的详细攻略：

下面是CSS垂直居中的五种实现方法的详细攻略：

方法一：使用flexbox布局

可以使用flexbox布局的align-items属性来进行垂直居中，值设置为center即可。具体实现如下：

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

示例说明：

<div class="container">
  <div>要垂直居中的元素</div>
</div>

方法二：使用table布局

将父元素的display属性设置为table，并设置子元素的vertical-align属性为middle，实现垂直居中。具体实现如下：

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

示例说明：

<div class="container">
  <div class="child">要垂直居中的元素</div>
</div>

方法三：使用grid布局

可以使用grid布局的place-items属性来进行垂直居中，值设置为center即可。具体实现如下：

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

示例说明：

<div class="container">
  <div>要垂直居中的元素</div>
</div>

方法四：使用绝对定位

将要垂直居中的元素的position属性设置为absolute，再通过top和transform属性进行定位。具体实现如下：

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

示例说明：

<div class="container">
  <div class="child">要垂直居中的元素</div>
</div>

方法五：使用calc函数

将要垂直居中的元素的高度设为固定值，再使用calc()函数计算margin-top的值，具体实现如下：

.container {
  height: 200px;
}
.child {
  height: 100px;
  margin-top: calc(50% - 50px);
}

示例说明：

<div class="container">
  <div class="child">要垂直居中的元素</div>
</div>

以上就是CSS垂直居中的五种实现方法的攻略，希望对您有所帮助。