Align Text in Table header after rotating it 90 or 270 degree

Question

I had rotated the the header text in a table but now the problem is, I am not able to center it. It should be aligned center but it just starts from the center and looks very weird. I can't to post image as this is my first question.

My Css:

<style>
.myClass {height: 350px; 
column-width: 20px;
text-align: left;
    white-space:nowrap; 
    g-origin:50% 50%;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    } 
</style>

and My Html Table

<table border="1">
    <tr>
        <th class="myClass">Secondlongheadear
        </th>
        
        <th class="myClass">Secondlongheadear
        </th>
        <th class="myClass">Second long headear
        </th>
        
    </tr>
    <tr>
      <td>foo</td>
      <td>foo</td>
      <td>foo</td>
     </tr>
    </table>

Answer 1

.myClass {
  white-space: nowrap;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8vh;
}

table {
  font-size: calc(1vh + 2vw);
  vertical-align: center;
  text-align: center;
  width: 80vw;
  height: 70vh;
}

table tr:last-child {
  max-height: 20%;
  background-color: red;
}

<table>
  <caption>Your Table
    <caption>
      <thead>
        <th class="myClass">Secondlong headear
        </th>

        <th class="myClass">Secondlong headear
        </th>

        <th class="myClass">Second long headear
        </th>
      </thead>
      <tbody>
        <tr>
          <td>tbody</td>
          <td>tbody</td>
          <td>tbody</td>
        </tr>
      </tbody>
      <tfoot>
        <td class="costam">foo</td>
        <td>foo</td>
        <td>foo</td>
      </tfoot>
</table>