[分享]css中如何让一个盒子垂直居中

在CSS中，让一个盒子垂直居中是Web开发中常见的问题。以下是几种实现方法：

/* 方法一：使用flex布局 */
.container {
  display: flex;
  align-items: center; /* 垂直居中 */
}

/* 方法二：使用定位 */
.container {
  position: relative;
}

.center {
  position: absolute;
  top: 50%; /* 距离顶部50% */
  transform: translateY(-50%); /* 向上移自身高度的50% */
}

/* 方法三：使用table布局 */
.container {
  display: table-cell;
  vertical-align: middle;
}

.center {
  display: inline-block; /* 或display: block */
}

/* 方法四：使用伪元素 */
.container {
  position: relative;
}

.container::before {
  content: "";
  height: 100%;
  width: 1px;
  display: inline-block;
  vertical-align: middle;
}

.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

以上是几种常用的方法，根据自己的需求选择最适合的方式即可。