4种CSS文字竖排方法

1. writing-mode属性法：可以使用writing-mode属性来实现文字竖排，将其设置为vertical-rl（从上到下书写），或者vertical-lr（从下到上书写），例如：

.vertical-text {
    writing-mode: vertical-rl;
}

2. transform属性法：可以使用CSS3的transform属性来实现文字竖排，将其设置为rotate(-90deg)，例如：

.vertical-text {
    transform: rotate(-90deg);
    transform-origin: right top;
}

3. text-orientation属性法：可以使用text-orientation属性来实现文字竖排，将其设置为upright（直立），例如：

.vertical-text {
    text-orientation: upright;
}

4. flex布局法：可以使用flex布局来实现文字竖排，将flex-direction属性设置为column，例如：

.container {
    display: flex;
    flex-direction: column;
}

.item {
    writing-mode: vertical-lr;
}

相关问题

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;` 则实现了文字竖排效果。