如何通過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%);
}