CSS总结水平垂直居中方法

1、text-align：center

设置块级元素内文本的水平居中对齐方式，如div、p、h1~h6等块级元素标签

2、line-height

单行文本垂直方向上居中，使其等于height的高度

<p>好好学习天天向上</p>

p{
    height: 100px; 
    line-height: 100px; /* 垂直居中 */
    text-align: center;  /* 水平居中 */
}

若有多行文本，则添加以下代码：

<div class="center">
   <p>好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上好好学习天天向上</p>
</div>

.center {
    background-color: skyblue;
    width: 200px;
    height: 300px;
    line-height: 300px;
    text-align: center;
}

.center p {
    line-height: 1.6; /* 行间距1.6倍 */
    display: inline-block;
    vertical-align: middle;
}

3、margin: auto

水平居中一个元素（如

）。元素通过指定宽度，并将两边的空外边距平均分配。如果没有设置 width 属性(或者设置 100%)，margin: auto将不起作用。
​

---

以下为公共代码，为后续的代码所用，后面就不再显示，只会给出相应提示

<!-- 公共代码区域 -->
<div class="box1">
    <div class="box2"></div>
</div>

.box1{       
    width: 300px; 
    height: 300px;      
    border: 1px solid red;
}
.box2{   
    height: 100px;
    width: 100px;
    border: 1px solid green;     
}

4、position + 负margin

实现垂直水平居中。
绝对定位的百分比是相对于最近已定位父元素的宽高，通过这个特性可以让子元素的居中显示，但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示
为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了，所以这个方法**需要知道子元素的宽高。**​

/* 此处引用上面的公共代码 */
.box1{       
    position:relative;
}
/* 方法1*/
.box2{      
    position: absolute;
    top:50%;
    left: 50%;
    margin-top: -50px;  /* 子元素高度的一半 100/2 */
    margin-left: -50px;
}


/* 方法2：原理同上，借用了css3的calc（）函数 */
.box2{      
    position: absolute;
    top:calc(50% - 50px);
    left:calc(50% - 50px);
} 


/* 方法3：基本同理，并参考第3点margin: auto  (不需要知道子元素宽高)*/
.box2{   
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
} 

5、position + transform

实现垂直水平居中，不需要知道子元素的宽高。

/* 此处引用上面的公共代码 */
.box1{       
    position:relative;
}
.box2{       
    position: absolute;
    top:50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

6、css-table

css新增的table属性，可以让我们把 普通元素 变为 table元素 的现实效果，通过这个特性也可以实现水平垂直居中。

/* 此处引用上面的公共代码 */
.box1{       
    display: table-cell;
    text-align: center;
    vertical-align: middle;
} 
.box2{     
    display: inline-block;  
}

7、flex

flex作为现代的布局方案，颠覆了过去的经验，只需几行代码就可以优雅的做到水平垂直居中。效果图：（如上图所示）

/* 此处引用上面的公共代码 */
.box1{      
    display: flex;
    justify-content: center;
    align-items: center;
}

---

• PC端有兼容性要求，宽高固定，推荐absolute + 负margin
• PC端有兼容要求，宽高不固定，推荐css-table
• PC端无兼容性要求，推荐flex
• 移动端推荐使用flex

---