如何通过CSS实现文本垂直对齐

一、使用line-height属性

line-height属性可以用来设定文本行与行之间的距离，同时也能够作为文本垂直居中的一种方式。通过将line-height属性的值设为所在容器的高度，可以使文本垂直居中。

.container {
  height: 100px;
  line-height: 100px;
}

二、使用display:flex

使用display:flex可以方便地进行文本的水平和垂直居中。通过设置容器的display属性为flex，并设置其子元素的align-items和justify-content属性，可以实现文本的垂直和水平居中。

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

三、使用position和transform

通过设置文本的position为absolute，并将top和left属性设为50%，再使用transform属性将文本向上移动一半的高度，可以实现文本的垂直居中。

.container {
  position: relative;
}
.container p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

四、使用table和vertical-align

使用display:table和display:table-cell可以模拟一个表格来实现文本的垂直居中。通过设置display:table-cell和vertical-align属性可以使文本垂直居中。

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

五、使用line-box，transform和position

通过将文本包裹在一个span元素内，并使用line-height属性使其垂直居中，再使用transform:translateY(-50%)将其上移一半的高度，再使用absolute属性将其定位在所在容器内部，可以实现文本的垂直居中。

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