2022-09-30 解决弹性布局flex中,align-item无法居中的问题

原创已于 2023-03-31 22:26:07 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flex #弹性布局 #css #css3 #html

于 2022-09-30 14:26:50 首次发布

笔记同时被 2 个专栏收录

87 篇文章

订阅专栏

bug&error

20 篇文章

订阅专栏

本文详细介绍了在使用弹性布局（flex）时，如何解决align-items无法使子元素垂直居中的问题。关键在于为父元素设置height:100vh而非100%。同时，对比了height:100%和height:100vh在元素无内容时的不同效果，100%不会撑开元素高度，而100vh则会设置为屏幕高度。

文章目录

问题出现

  <style>
    .container{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #box{
      width: 100px;
      height: 100px;
      background-color: #1890FF;
    }
  </style>
  <body>
    <div class="container">
      <div id="box"></div>
    </div>
  </body>

此时box不能实现垂直居中,因为父盒子的高度没有被撑开,
即父元素缺乏高度

解决方法

给父元素增加高度

  <style>
    .container{
      display: flex;
      justify-content: center;
      align-items: center;
      background: pink;
      /* height: 100%; */
      height:100vh;
    }
    #box{
      width: 100px;
      height: 100px;
      background-color: #1890FF;
    }
  </style>
  <body>
    <div class="container">
      <div id="box"></div>
    </div>
  </body>