元素上下左右居中的若干实现方法
html简单代码
<div class="parent">
<div class="son"></div>
</div>
1、定位 + margin负值/margin:auto/transform
.parent{
width:400px;
height:400px;
position:relative;
background:#f00;
}
//子元素固定宽高且宽高小于父元素 可以用margin负值、margin:auto或transform
//子元素宽高超出父元素 用margin负值或transform
//宽高不固定,用transform
.son{
height:200px;
width:200px;
background:#0f0;
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-200px;
}
.son{
height:200px;
width:200px;
background:#0f0;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
.son{
height:200px;
width:200px;
background:#0f0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
2、table布局
// 父元素不能有flex、浮动等
.parent{
display:table-cell;
vertical-align:middle;
}
3、flex布局
.parent{
display:flex;
}
.son{
margin:auto;
}
//或者
.parent{
display:flex;
justify-content:center;
vertical-align:center;
}
4、珊格布局
.parent{
display:grid;
place-content: center;
}
详细代码请见codepen