第一种盒子居中方法:flex布局
/* 设置弹性布局 */
display: flex;
/* 主轴居中 */
justify-content: center;
/* 侧轴居中 */
align-items: cente
缺点:盒子无法覆盖其他标准流
第二种盒子居中方法:margin+定位(子绝父相)
.father {
/* 相对定位 */
position: relative;
width: 500px;
height: 300px;
}
.son {
/* 绝对定位 */
position: absolute;
width: 200px;
height: 100px;
/* 移动父元素的一半 */
top: 50%;
left: 50%;
/* 移动当前子元素自己宽高发一半 */
margin-left: -100px;
margin-top: -50px;
}
缺点:盒子子的宽高要固定
第三种盒子居中的方法:位移+定位(子绝父相)最常用
.father {
/* 相对定位 */
position: relative;
width: 500px;
height: 300px;
}
.son {
/* 绝对定位 */
position: absolute;
/* 移动父元素的一半 */
top: 50%;
left: 50%;
width: 200px;
height: 100px;
/* 移动当前子元素自己宽高发一半 */
transform: translate(-50%,-50%);
}
第四种盒子居中的方法:定位加margin实现
.father {
/* 相对定位 */
position: relative;
width: 500px;
height: 300px;
}
.son {
/* 绝对定位 */
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
/* 上下左右外边距自适应 */
margin: auto;
}