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

前端OnTheRun

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

阅读量1.2k

点赞数

分类专栏： bug&error 笔记文章标签： flex 弹性布局 css css3 html

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

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/127123054

版权

本文详细介绍了在使用弹性布局（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;
    }
  <