css居中的几种方法_CSS几种常用的水平垂直居中对齐方法

文字的水平垂直居中

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;}

居中效果：

扫码关注 青春正当时