本文目錄導(dǎo)讀：

1. 使用flexbox布局
2. 使用vertical-align屬性

CSS中讓豎排文字居中的方法

在CSS中，讓豎排文字居中是一個常見的需求，下面是一些實現(xiàn)的方法。

使用flexbox布局

Flexbox布局是一種非常強大的布局方式，可以輕松地讓豎排文字居中，只需要將容器設(shè)置為flex布局，并將子元素設(shè)置為flex-start或flex-end即可。

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

二、使用position和transform屬性

通過position和transform屬性，也可以實現(xiàn)豎排文字的居中效果。

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

使用vertical-align屬性

vertical-align屬性可以用來設(shè)置元素的垂直對齊方式。

.container {
  vertical-align: middle;
}

需要注意的是，vertical-align屬性只對行內(nèi)元素和表格單元格有效，對于塊級元素，可以使用偽元素來實現(xiàn)類似的效果。

.container {
  position: relative;
}
.text {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
}

是幾種實現(xiàn)豎排文字居中的方法，可以根據(jù)具體的需求選擇適合的方式。