如何将转换后的旋转div居中？

Question

如何在"HTML"表的第一列和第三列中居中"ABC"和"ABCDEFGHIJ"文本？我尝试了HTML标签text-align,但我认为翻译阻止了这种对齐.

td.rotate div {
  transform: translate(68px, 55px) rotate(270deg);
  white-space: nowrap;
  height: 150px;
  translate-origin: left top;
  width: 25px;
  text-align: center;
}

<table border="2px">
  <tr>
    <td class="rotate">
      <div>ABC</div>
    </td>
    <td>123</td>
    <td class="rotate">
      <div>ABCDEFGHIJ</div>
    </td>
  </tr>
</table>

Answer 1

你可以使用这个神奇的片段将所有内容集中在一起:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

它也适用于这种情况.孩子divs会有position: absolute,所以我们必须position: relative为父母设置它们相对于它的位置,并且父母也需要设置宽度和高度,因为内容将不再自动设置它.

td.rotate {
    position: relative;
    height: 150px;
    width: 15px;
}

td.rotate div {
    transform: translate(-50%, -50%) rotate(270deg);
    white-space: nowrap;
    top: 50%;
    left: 50%;
    position: absolute;
    text-align: center;
}

<table border="2px">
    <tr>
        <td class="rotate">
            <div>ABC</div>
        </td>
        <td>123</td>
        <td class="rotate">
            <div>ABCDEFGHIJ</div>
        </td>
    </tr>
</table>