Flex 布局下如何实现 Body 100% 高度并垂直居中？

flex 居中排布，body 100% 高度

在 Flex 布局中，垂直居中需要设置 align-items: center，而要让 Body 100% 则需要额外设置 height，实现如下：

body, html {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}

如果 Body 设置 height: 100vh，可能会出现其他兼容性问题，如需了解详情，可参考移动端 body 高度为100vh 时，实际高度超过了视窗高度。

以上就是Flex 布局下如何实现 Body 100% 高度并垂直居中？的详细内容，更多请关注其它相关文章！