div 中垂直居中的竖排文本

Question

我有一个 div，其中包含一些垂直方向的文本，如下所示。我要达到的效果，如下图：

Answer 1

我不确定你的 html/css 结构，或者你的代码可能是什么样子，但这是我写的一个例子。

* {
  box-sizing: border-box; /* Set the box sizing for easier margins/paddings. */
}

html,
body {
  margin: 0; /* Demo style. */
  background: #95a5a6; /* Demo style. */
}

.container {
  width: 50%; /* Demo style. */
  margin: 50px auto; /* Demo style. */
  background: white; /* Demo style. */
  font-family: arial; /* Demo style. */
  font-size: 16px; /* Demo style. */
}

/* The parent of the rotated text. */
.box {
  position: relative; /* Relative for the absolute childs. */
  background: #c0392b; /* Demo style. */
  color: white; /* Demo style. */
  padding: 10px; /* Demo style. */
  height: 200px; /* Static height is required. */
}

/* The rotated text */
.box span {
  width: 200px; /* Must be the same as the height of the .box div. */
  -webkit-transform-origin: 90px 100px; /* These values will need to be changed depending on your width of this span, and height of it's parent. */
  display: inline-block; /* Set the display of the span to be in the block flow. */
  -webkit-transform: rotate(-90deg); /* Rotate the text span. */
  background: #2980b9; /* Demo style. */
  text-align: center; /* Center the text. */
  padding: 10px; /* Demo style. */
  float: left; /* Make the rotated text be on the left most part of the parent. */
}

/* Other content that can be beside the rotated text */
.content {
  position: absolute; /* So the content is not affected by the rotated text. */
  margin: 0 0 0 30px; /* Push the content from the left so it is not behind the rotated text. */
  top: 0; /* Push the content to the top of the parent. */
  padding: 0 10px; /* Demo style. */
}

<div class="container">
  <div class="box">
    <span>JS</span>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis culpa laborum suscipit, laudantium ut recusandae architecto modi natus incidunt, consequuntur ea quas quod nisi nobis possimus nostrum, porro neque saepe.</p>
    </div>
  </div>
</div>

div 中垂直居中的竖排文本

Vertical text with vertical-align middle in a div

html

css

direction