如何实现不定宽高的div水平垂直居中
第一个方法:我们使用定位给父元素positon:relative,定位到中间
div{
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
注释:子绝父相(子元素绝对定位,父元素相对定位)
第二个方法:通过flex布局
div {
display: flex;
justify-content:center; //子元素水平居中(主轴)
align-items:center; //子元素垂直居中(侧轴)
}
第三个方法:
#box {
width: 100px;
height: 100px;
position: relative;
}
#content {
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}