html - 文本水平居中，但在转换时不是垂直居中

Question

我创建了两个矩形 div(需要保持 60 像素宽和 150 像素高)，其中包含文本。文本应在矩形中垂直对齐，因此我使用了 transform: rotate(-90deg) 使文本垂直倾斜。

我想让文本垂直并在框中居中。在垂直旋转文本之前，我使用 display: table 和 vertical-align: middle 方法将文本居中。当文本是水平的时，这非常有效。但是，旋转内容后，文本不会保持居中。 CSS 仍然使文本居中，就好像它是水平的一样。

我尝试使用绝对/相对定位从顶部和左侧偏移文本，但是当我删除 display: table 和 vertical-align: center 属性时，文字消失。

关于如何在保持表格属性的同时使垂直倾斜的文本居中的任何想法？任何输入将不胜感激。

fiddle :https://jsfiddle.net/sxchx6zm/3/

HTML

<div id="both">
    <div class="rectangle">
        <div class="vertical">Text Area 1</div>
    </div>  
    <div class="rectangle">
        <div class="vertical">Test Area 2</div>
    </div>   
</div>

CSS

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
  display: table;

}

.vertical {
  font-size: 16pt;
  height: 150px;
  max-width: 60px;
  display: table-cell;
  vertical-align: middle;
  transform: rotate(-90deg);
  white-space: nowrap;
}

Answer 1

如果您可以为 .vertical 设置 width 而不是 max-width.

如果这样做，您只需将其添加到 .vertical 的 CSS -- text-align:center;

这让你的 CSS 变成了这样:

.rectangle {
  height: 150px;
  width: 60px;
  background-color: #d3d3d3;
  border: 1px solid red;
  display: table;
}

.vertical {
  font-size: 16pt;
  height: 150px;
  width: 60px; //modified
  display: table-cell;
  vertical-align: middle;
  transform: rotate(-90deg);
  white-space: nowrap;
  text-align : center; //added
}

请注意，您需要将文本水平和垂直居中，因此采用了此解决方案。 这是更新的 fiddle :https://jsfiddle.net/sxchx6zm/19/