<div class="container">
<div class="item">item</div>
</div>
.container{
background-color: rgba(0,0,0,0.5);
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
display:flex;
}
.item{
margin:auto;
}
理解的重点在于:
- flex容器的子元素只占据必要空间,类似
inline-block
- 容器display为
flex
时,item的margin:auto
才会在水平和竖直方向平均分配边距。