文字的水平垂直居中
class="content"><p>文字水平垂直居中p></div>
.content{width: 400px; height: 100px; border: #000000 solid 1px;}
当前效果：
.content{width: 400px; height: 100px; border: #000000 solid 1px; text-align: center; line-height: 100px;}
文字水平垂直居中效果：
元素的水平垂直居中
class="content"><div class="box">盒子居中div></div>
.content{margin: 20px auto; width: 300px; height: 300px; border: #000000 solid 1px; } .box{width: 120px; height: 120px; line-height: 120px; text-align: center; background: red; }
当前效果：
01使用绝对定位
.content{position: relative; margin: 20px auto; width: 300px; height: 300px; border: #000000 solid 1px;}.box{position: absolute; top:0; left: 0; bottom: 0; right: 0; width: 120px; height: 120px; line-height: 120px; margin: auto; text-align: center; background: red;}
居中效果：
02使用绝对定位+calc()
.box{position: absolute;top:calc(50%-120px/2);left:calc(50%-120px/2); width: 120px; height: 120px; line-height: 120px; text-align: center; background: red;}
居中效果：
03使用绝对定位+transform()
.box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; line-height: 120px; text-align: center; background: red;}
居中效果：
04使用CSS3弹性盒模型
/*作用于父元素*/.content{display: flex;/*弹性布局*/ justify-content: center;/*水平居中*/align-items:center;/*垂直居中*/ position: relative; margin: 20px auto; width: 300px; height: 300px; border: #000000 solid 1px;}.box{width: 120px; height: 120px; line-height: 120px; text-align: center; background: red;}
居中效果：
扫码关注 青春正当时
