How do I center a transformed and rotated div?

Question

How do I center text "ABC" and "ABCDEFGHIJ" in columns one and three of this HTML table? I tried HTML tag text-align, but I think the translate is preventing that alignment.

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

You can center absolutely everything with this magic snippet: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

It works in this case as well. Children divs will have position: absolute, so we have to set position: relative for parent so they are positioned relatively to it, and also parent needs to have set width and height since content will no more automatically set it.

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>

Answer 2

Ok so instead of manupulating your code, I took a couple steps back and rewrote somethings, trying to keep your general structure in tact. What if, instead of the rotating css you wrote, we did something like just a simple transform: rotate(-90deg); on the <div> with the text. Then just extend the height of the <td> tags a little bit.

HTML

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

CSS

.rotateText{
  -webkit-transform: rotate(-90deg);    
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
td{
  height:100px;
} 

and finally, the JS JIDDLE