网站开发 · 2024年11月24日

如何使用 Flex 布局实现背景垂直居中且 body 高度为 100%？

如何使用 Flex 布局实现背景垂直居中且 body 高度为 100%？插图

flex 布局 body 100%

在 Flex 布局下，要实现背景垂直居中并且 body 高度 100%，需要同时给 html 和 body 标签设置高度为 100%。

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;}
    html, body {height: 100%;}
    body {
      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>

登录后复制

或者

<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 {
      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>

登录后复制

以上就是如何使用 Flex 布局实现背景且 body 高度为 100%？的详细内容，更多请关注米云其它相关文章！

您可能还喜欢...