子元素作为行内元素时:
HTML部分:
<div class="parent_box">
<span>行内元素</span>
</div>
CSS部分:
1. 使用text-align:center水平居中,再将行内元素的line-height属性设置为父元素的高度
.parent_box{
width: 200px;
height: 200px;
text-align: center;
}
span{
line-height: 200px;
}
2. 将父元素变为table元素
.parent_box{
width: 200px;
height: 200px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
span{
display: inline-block;
}
子元素作为块元素时:
已知父元素和子元素大小
HTML部分:
<div class="parent_box">
<div class="child_box">
</div>
</div>
CSS部分:
1.使用position定位,将top和left都设置成50%,再使用margin-left取子元素宽的一半,margin-top取子元素高的一半,取负数,恢复偏移
.parent_box{
width: 200px;
height: 200px;
position: relative;
}
.child_box{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
}
2.设置position各个方向都为0,然后margin设为auto
.parent_box{
width: 200px;
height: 200px;
position: relative;
}
.child_box{
width: 100px;
height: 100px;
margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
3.使用了calc对子元素进行偏移
.parent_box{
width: 200px;
height: 200px;
position: relative;
}
.child_box{
width: 100px;
height: 100px;
position: absolute;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
不需要知道子元素的宽和高
1.通过transform属性的translate进行偏移,参数分别为子元素宽和高的一半
.parent_box{
width: 200px;
height: 200px;
position: relative;
}
.child_box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
position:fixed水平居中
#Box{
width: 400px;
height: 300px;
position: fixed;
left: 0;
right: 0;
margin:0 auto;
}
不管子元素是行内还是块
1.flex布局
.parent_box{
width: 200px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
}
2.grid布局:子元素不管是行内还是块,不设宽都会独占一行(宽度和父元素相同)
.parent_box{
width: 200px;
height: 200px;
display: grid;
}
.child_box{
align-self: center;
justify-content: center;
}