css文字竖着排列 垂直居中

CSS中的文字竖向排列和垂直居中可以通过多种方法实现，特别是在CSS3引入了新特性之后。以下是一些常见的方法：

1. `writing-mode`属性: 这个属性用于指定文本行的书写方向，如 `vertical-rl` 或 `vertical-lr`。设置为`vertical-rl`时，从右到左书写，文本默认会从顶部向下排列。

2. `display`属性: 你可以将元素的`display`属性设置为`inline-block`或`table-cell`，然后使用`transform: rotate(90deg)`将元素旋转90度。配合`vertical-align: middle`实现垂直居中。

3. Flexbox: 对于容器使用`display: flex`，然后设置子元素的`flex-direction: column`，再用`align-items: center`使其在垂直方向上居中。

4. Grid布局: 用`display: grid`创建网格布局，将`grid-template-columns`设为`auto 1fr`，让第一列自动填充满，第二列只占据一行高度，然后`align-items: center`。

5. 使用伪元素`:before`和`:after`: 创建一个包含内容的元素，然后在伪元素中添加垂直居中的样式，并将实际内容放在它们中间。

相关问题

css文字竖排效果且垂直居中水平居中

实现文字竖排效果，可以使用CSS的writing-mode属性，设置为vertical-rl（从上到下，从右到左）。垂直居中可以使用flex布局，设置父元素display:flex; align-items:center;。水平居中可以使用text-align:center;，如下所示：

HTML代码：

<div class="vertical-text">
  <p>竖排文字</p>
</div>

CSS代码：

.vertical-text {
  writing-mode: vertical-rl; /* 文字竖排 */
  display: flex; /* 父元素flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px; /* 设置高度，方便演示 */
}
.vertical-text p {
  margin: 0; /* 去除默认的外边距 */
  text-align: center; /* 水平居中 */
  font-size: 24px; /* 设置字体大小 */
  line-height: 1.5; /* 设置行高，让文字竖排更美观 */
}

效果如下图所示：


CSS文字竖排效果且垂直居中水平居中

要实现CSS文字竖排效果且垂直居中水平居中，可以使用以下代码：

<div class="wrapper">
  <p>竖排文字</p>
</div>

.wrapper {
  width: 100px;
  height: 100px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

其中，`.wrapper` 为包裹竖排文字的容器，通过 `display: flex;` 和 `align-items: center; justify-content: center;` 实现垂直居中和水平居中。而 `writing-mode: vertical-rl;` 和 `text-orientation: mixed;` 则实现了文字竖排效果。