登录
首页 >  文章 >  前端

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

时间：2024-12-23 14:00:57 231浏览 收藏

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何使用 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%？ 》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>