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

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《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% 高度并垂直居中？ 》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！