方法一:利用弹性盒模型(只给父级设置样式)
display: flex; //把父级变成弹性盒
justify-content: center; //让子元素在水平方向上居中分布
align-items: center; //让子元素在垂直方向上居中分布
方法二:利用弹性盒模型(给父级和子级设置样式)
父级元素
display: flex;(垂直居中)
子级元素
margin: auto;(水平居中)
方法三:利用定位属性(position)+位移属性(transform)
relative相对定位,会在标准流当中占位置
absolute绝对定位,不会在标准流当中占位置
父级元素
position: relative;
子级元素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
注意:这里不一定需要子绝父相,必要情景下,除了(static)静态定位外都可以使用,但这样做会产生额外的
问题(脱离文档流)
总结:把脱离文档流的元素放在不脱离文档流(需要占位置)的元素上就要用“子绝父相”
代码演示(此处仅用一种方法):
HTML
<div class="father_box">
<divclass="son_box">
水平垂直居中
</div>
</div>
CSS
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%; //必须设置
height: 100%; //必须设置
position: relative;
}
.father_box {
width: 500px;
height: 500px;
background-color: aqua;
position:absolute;
/* position:static; 除静态定位外都可以 */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.son_box {
width: 300px;
height: 300px;
background-color: rgb(14, 216, 51);
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
运行结果
个人拙见,敬请斧正