css垂直居中

CSS有多种方式可以实现垂直居中，以下是其中的几种方法：

使用flex布局

使用flex布局可以很方便地实现垂直居中，只需将父容器设置为display:flex，然后使用align-items:center即可。示例代码如下：

.parent {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

使用table-cell布局

使用table-cell布局也可以实现垂直居中，只需将父容器设置为display:table-cell，然后使用vertical-align:middle即可。示例代码如下：

.parent {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

使用position和transform

使用position和transform可以实现绝对定位元素的垂直居中。首先将父容器设置为相对定位position:relative，然后将子元素设置为绝对定位position:absolute，再使用transform:translateY(-50%)将元素上移一半高度即可。示例代码如下：

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 垂直水平居中 */
}

使用line-height

使用line-height可以实现单行文本的垂直居中。只需将父元素设置与字体大小相同的line-height即可。示例代码如下：

.parent {
  height: 100px;
  line-height: 100px; /* 垂直居中 */
  text-align: center; /* 水平居中 */
}

使用display:table和display:table-cell

使用display:table和display:table-cell也可以实现垂直居中。只需将父元素设置为display:table，子元素设置为display:table-cell，并使用vertical-align:middle即可。示例代码如下：

.parent {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center; /* 水平居中 */
}
.child {
  display: table-cell;
  vertical-align: middle; /* 垂直居中 */
}