一、通过绝对定位+margin来实现水平垂直居中

.box{width: 300px;height: 300px;background-color: red;position: relative;}.son{width: 100px;height: 100px;background-color: yellow;position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto    ;}

<div class=\"box\"><div class=\"son\"></div></div>

二、绝对定位+负margin实现

.box{width: 300px;height: 300px;background-color: red;position: relative;}.son{width: 100px;height: 100px;background-color: yellow;position: absolute;top: 50%;left: 50%;margin-top: -50px;margin-left: -50px;}

<div class=\"box\"><div class=\"son\"></div></div>

三、通过transform属性水平垂直居中

.box{width: 300px;height: 300px;background-color: red;position: relative;}.son{width: 100px;height: 100px;background-color: yellow;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}

<div class=\"box\"><div class=\"son\"></div></div>

四、通过flex设置父盒子的布局属性

.box{width: 300px;height: 300px;background-color: red;display: flex;justify-content: center;align-items: center;}.son{width: 100px;height: 100px;background-color: yellow;}

<div class=\"box\"><div class=\"son\"></div></div>

五、文本垂直居中

.box{width: 100px;height: 100px;background-color: red;position: relative;}.son{width: 100%;text-align: center;line-height: 100px;}

<div class=\"box\"><div class=\"son\">文本垂直居中</div></div>