Flexbox不垂直对齐

Question

我需要一些帮助垂直对齐下表。 我无法理解为什么它没有垂直对齐。

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

Answer 1

您可以使用此样式修复它：

body, html {
  height: 100%;
}

如果没有这个，身体的高度只占据足够的空间来容纳其内容。

Fiddle