目标
使子元素(盒子和文字同时)水平垂直居中
<body>
<div class="father">
<div class="son">
你好呀,2022
</div>
</div>
</body>
法1 : 子绝父相,子盒子left,,right,top,bottom都设置为0，然后margin: auto,就可以实现子盒子水平垂直居中;子盒子高与行高相等+text-align: center ,就可以实现文字水平垂直居中
.father {
position: relative;
width: 300px;
height: 300px;
background-color: #ccc;
}
.son {
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: pink;
}
法2 :子绝父相,子盒子left,top都设置为50%,然后X轴,Y轴都位移-50%,就可以实现子盒子水平垂直居中;子盒子高与行高相等+text-align: center ,就可以实现文字水平垂直居中
.father {
position: relative;
width: 300px;
height: 300px;
background-color: #ccc;
}
.son {
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-50% ,-50%);
background-color: pink;
}
法3 :子绝父相, 子盒子left,top都设置为50%,然后X轴向左位移100px(自身宽的一半),Y轴向上位移100px(自身高的一半),就可以实现子盒子水平垂直居中;子盒子行高与高相等+text-align: center ,就可以实现文字水平垂直居中
.father {
position: relative;
width: 300px;
height: 300px;
background-color: #ccc;
}
.son {
position: absolute;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
left: 50%;
top: 50%;
transform: translate(-100px ,-100px);
background-color: pink;
}
法4 :flex 布局,父盒子和子盒子均使用 display: flex; justify-content: center; align-items: center; 就可以使子盒子和文字同时水平居中
.father {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background-color: #ccc;
}
.son {
display: flex;
justify-content: center;
align-items: center;
width: 200px;
height: 200px;
background-color: pink;
}
法5 flex 布局,父盒子使用 display: flex; justify-content: center; align-items: center; 就可以使子盒子水平居中;子盒子使用行高与高相等+text-align: center ,就可以实现文字水平垂直居中
.father {
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 300px;
background-color: #ccc;
}
.son {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: pink;
}
法6 :需要给父盒子设置边框,然后计算出子盒子 margin-top 和 margin-left 的值,就可以实现子盒子水平垂直居中;子盒子使用行高与高相等+text-align: center ,就可以实现文字水平垂直居中
.father {
width: 300px;
height: 300px;
border: 1px solid transparent;
background-color: #ccc;
}
.son {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
margin-top: 50px;
margin-left: 50px;
background-color: pink;
}
法7 :父盒子设置display:table-cell;vertical-align: middle;text-align: center; 子盒子要设置为 display:inline-block;就可以实现子盒子水平垂直居中;子盒子使用行高与高相等+text-align: center ,就可以实现文字水平垂直居中
.father {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 300px;
height: 300px;
background-color: #ccc;
}
.son {
display: inline-block;
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background-color: pink;
}
