html - Flexbox does not vertically align -

i need vertically aligning following table. can not understand reason why doesn't vertically align.

html:

<table>     <tr>         <td>lorem ipsum</td>         <td>lorem ipsum</td>     </tr>     <tr>         <td>lorem ipsum</td>         <td>lorem ipsum</td>     </tr> </table> 

css:

body {     display: flex;     justify-content: center;     align-items: center; } 

fiddle

you can fix style:

body, html {   height: 100%; } 

without this, body's height takes enough space hold content.

fiddle