How can I vertically align a <table> in the middle of a fixed height <div>?

Have you tried "display:flex;"?

div{
    width: 850px;
    height: 470px;
    
    display: flex;
    /* WIDTH and HEIGHT are required */
    justify-content: center;
    align-items: center;
}
td, table{
    border-collapse: collapse;
    border: 1px solid black;
}
<div>
    <table>
        <tr>
          <td>Lorem</td>
          <td>Lorem</td>
          <td>Lorem</td>
        </tr>
        <tr>
          <td>2019</td>
          <td>2018</td>
          <td>2017</td>
        </tr>
    </table>
</div>

Outside of table cells, vertical-align sets the vertical alignment of text within a line, rather than the vertical alignment of entire elements like your table.

However, if you set display: table-cell; on your <div>, that seems to achieve the effect you want.

I’m not sure how many browsers support this though. I’ve checked in Chrome 6, Firefox 2 and Opera 10.5, and they’re fine with it. Internet Explorer could be a different matter.

Tags:

Html

Css

Xhtml

Vertical Alignment

Recent Posts