css文字竖排居中显示

/* CSS代码实现文字竖排居中显示 */

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 设置容器高度为视口高度 */
  text-align: center; /* 文字水平居中 */
}

.vertical-text {
  writing-mode: vertical-rl; /* 文字竖排，从右向左排列 */
  transform: rotate(180deg); /* 翻转文字方向，使其从左向右排列 */
}

<!-- HTML代码 -->
<div class="container">
  <div class="vertical-text">
    竖排居中的文字
  </div>
</div>

解释说明：

1. 容器布局：使用 display: flex 和 align-items: center、justify-content: center 来确保 .container 内的内容在水平和垂直方向上都居中。
2. 文字竖排：通过 writing-mode: vertical-rl 实现文字竖排显示，vertical-rl 表示文字从右向左排列。
3. 翻转文字方向：使用 transform: rotate(180deg) 将文字翻转 180 度，使文字从左向右排列。