请教下 flex 下垂直居中的问题，body 如何 100%?

作者站长头像
站长
· 阅读数 18

我有一个 html 页面，全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<title>Blog</title>
<style type="text/css">
* {margin:0;padding:0;border:0;}
body {width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 20px;}
.blog {width:90%;height:40vh;}
h1{font-size:44px;}
p{padding:10px 0;}
@media only screen and (max-width: 812px) {
  .blog {
    width: 80%;
    height:60vh;
  }
}
</style>
</head>
<body>
<div class="blog">
  <h1>Blog</h1>
  <p>12344</p>
  <p>45677</p>
  <p>56789</p>
  <p>98213123213213</p>
</div>
</body>
</html>

我想实现的是在所有的设备上（pc端和移动端），整个 body 的高度是 100% 满屏，blog 这个 div 垂直居中显示。

我现在这个在 pc 端还正常，可是在移动端右侧会出现滚动条，body 并不是 100% 高度。

请指导下，谢谢

回复
1个回答
avatar
test
2024-07-05

你需要给 html 标签也添加 height:100% 的样式。或者给 body 设置 height:100vh 的样式。但是会有其他问题，可以参考一下我早前的这个问答 移动端 body 高度为100vh 时，实际高度超过了视窗高度。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容