Html Flexbox不垂直对齐

我需要一些帮助垂直对齐下表。 我不明白为什么它没有垂直对齐

HTML:

<table>
    <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
    <tr>
        <td>Lorem Ipsum</td>
        <td>Lorem Ipsum</td>
    </tr>
</table>

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

---

您可以使用以下样式进行修复：

body, html {
  height: 100%;
}

没有这一点，身体的高度只占足够的空间来容纳它的内容

---

真的是关于得分的。非常感谢你。