How can I rotate the text in a td and keep it center? [duplicate]

Question

I would like to do something like this but I'm not able to do it.

I know how to rotate the text with :

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

But I don't know how to keep it aligned in the center of the cell.

Could you help me?

Answer 1

Taken from: https://stackoverflow.com/a/27258573/6376949

.rotate {
  display: inline-block;
  filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.tblborder,
.tblborder td,
.tblborder th {
  border-collapse: collapse;
  border: 1px solid #000;
}
.tblborder td,
.tblborder th {
  padding: 20px 10px;
}

<table class="tblborder">
  <tr>
    <th>
      <div class="rotate">header</div>
    </th>
    <th>
      <div class="rotate">header</div>
    </th>
    <th>
      <div class="rotate">header</div>
    </th>
  </tr>
  <tr>
    <td>
      <div class="rotate">detail</div>
    </td>
    <td>detail</td>
    <td>detail</td>
  </tr>
  <tr>
    <td>detail</td>
    <td>detail</td>
    <td>detail</td>
  </tr>
</table>