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

原创

已于 2023-03-31 22:26:07 修改

· 1.2k 阅读

0 ·

版权

文章标签：

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

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

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

问题出现

  <style>
    .container{
    
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #box{
    
      width: 100px;
      height: 100px;
      background-color: #1890FF;
    }
  <