css元素居中对齐
css 盒子居中对齐
1. 弹性盒子
.father{
display:flex;
justity-content:center;
align-items:center
}
.son{
...
}
<div class="father">
<div class="son"></div>
</div>
2. 父相子绝定位布局 + transfrom
.father{
position:retivate;
}
.son{
position:absolute;
left:50%;
top:50%;
transfrom:translate(-50%,-50%);
}
3.父相子绝+ margin auto
.father{
position:relative;
}
.son{
postion:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}