Flex 布局下如何实现元素垂直居中且 body 元素占满全屏？

一分耕耘，一分收获！既然打开了这篇文章《Flex 布局下如何实现元素垂直居中且 body 元素占满全屏？》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

flex 下无法垂直居中，body 无法 100% 满屏

给定的 html 代码中，希望在所有设备上实现 body 元素 100% 满屏高度，同时 blog 元素垂直居中。但在移动端，body 无法 100% 满屏，右侧出现滚动条。

修改建议：

1. 添加 height:100% 到 html 元素：

   html, body {
     height: 100%;
   }

2. 使用 height:100vh 代替 height:100% 到 body 元素：

   body {
     height: 100vh;
   }

此修改确保 body 元素在所有视口中高度为 100% 视口高度（vh）。

有关 body 高度为 100% vh 但实际高度超过视口高度的问题，可参考以下问答：

[移动端 body 高度为 100vh 时，实际高度超过了视窗高度](参考链接)

今天关于《Flex 布局下如何实现元素垂直居中且 body 元素占满全屏？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！