文字的水平垂直居中
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;}
居中效果:
扫码关注 青春正当时