问题出现
<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>
*注意应该设置height:100vh,而不能设置height:100%
效果

height:100%和height:100vh的区别
当元素没有内容时候,
设置height:100%,该元素不会被撑开,此时高度为0,
但是设置height:100vh,该元素会被撑开屏幕高度一致。

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

被折叠的 条评论
为什么被折叠?



