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 元素占满全屏？的详细内容，更多请关注其它相关文章！