html - How center text in absolute div inside td? -

in project, there html table each td contains div. have set div fit td, set position of td relative , div absolute.

please consider following table , style:

table {    width: 500px;    height: 600px;  }  table td {    position: relative;  }  table td div {    position: absolute;    backgroundcolor: red;    top: 0;    right: 0;    bottom: 0;    left: 0;  }

<table id="thetable">    <tr>      <th>a</th>      <th>b</th>      <th>c</th>    </tr>    <tr>      <td>        <div>a1</div>      </td>      <td>        <div>b2</div>      </td>      <td>        <div>c2</div>      </td>    </tr>    <tr>      <td>        <div>a2</div>      </td>      <td>        <div>b2</div>      </td>      <td>        <div>c2</div>      </td>    </tr>  </table>

the above styled table perfect fulfill expected for. next, want set text in absolute div center (include vertically).

so found around internet, of them suggesting give div display: table; style. obviously, fails :(

can tell me how center text?

just add text-align: center; css table td div{ ... }

example: https://jsfiddle.net/9kznm317/