css盒子设置垂直居中

在网页设计中，盒子的垂直居中是一个非常常见的需求。CSS中有多种方式可以实现盒子的垂直居中，接下来就让我们来学习一下。

第一种方式是使用flex布局。使用display:flex设置容器为弹性布局，再使用align-items:center设置容器中的盒子垂直居中即可。

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

第二种方式是使用定位。在容器中使用绝对定位，再通过top、bottom、left、right属性来控制盒子的位置。当使用top和bottom属性且值均为0时，盒子将会居中。

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}
 

第三种方式是使用table布局。将容器设置为table-cell，再通过vertical-align:middle设置盒子垂直居中。

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

以上就是三种常见的CSS盒子垂直居中的实现方式。根据不同的需求和场景，选择不同的方式来实现垂直居中即可。