CSS水平与垂直居中的一些方法

一、水平居中

1.方法一

适用于： display 为 inline 或 inline-block 的元素
方法： 给父元素设置 text-align:center

2.方法二

适用于： 已知宽度的块状元素(已知像素宽或百分比)
方法： 设置左右 margin 值为 auto

3. 方法三

适用于： 未知宽度的块状元素
方法： 设置为display:table或者在元素外面加入table标签（包括 ），然后可以当成定宽元素使用margin:0 auto
**注： ** 利用 table 标签的长度自适应性---即不定义其长度也不默认父元素 body 的长度（ table 其长度根据其内文本长度决定），因此可以看做一个定宽度块元素。

4. 方法四

方法： 为父元素设置 display:flex以及justify-content:center
注： flex 是Flexible Box 的缩写,意为"弹性布局"。

5. 方法五

适用于： 宽度已知的元素
方法： 设置position:absolute以及left:50%，并将margin-left设置为 -1/2 的宽度值。

二、垂直居中

1.方法一

适用于：父元素高度确定，子元素为一个或多个 inline 或 inline-block 元素，或者子元素为一个块状（block）元素。
方法： 设置父元素的 height 和line-height高度一致。

    我是垂直居中的单个元素。

div.wrap{
    background:#ddd;
    height:100px;
    line-height:100px;  // 与 height 相同。
}
span{
    background:#aaa;
}

垂直居中的单个元素

弊端：当子元素为多个 inline 或 inline-block 元素且内容的长度大于父元素的宽时，就有内容脱离了块。如下图：

多个元素时可能脱离父元素

2.方法二

方法： 使用 table (包括tbody、tr、td)标签，把子元素包裹在td内。
**注： ** css 中有一个用于竖直居中的属性vertical-align，在父元素设置此样式时，对inline-block类型的子元素有用。
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以不需要显式地设置。
弊端：加入了无意义的标签，不符合语义化。

  

    

      

        
我是垂直居中的。
      
    
  

td.wrap{
    background:#ddd;
    height:200px;
}
div{
    background:#aaa;
}

垂直居中

3.方法三

方法： 父元素的 display 设为table-cell，并且将vertical-align 设为middle 。
弊端：虽然没有添加多余的无意义的标签，但是兼容性不是很好，不兼容 IE6、7。而且修改display:table-cell，破坏了原有的块状元素的性质。

  
我是垂直居中的。

div.wrap{
    background:#ddd;
    height:200px;
    display:table-cell;
    vertical-align:middle;
}
.wrap div{
    background:#aaa;
}

效果同上

4. 方法四

方法： 为父元素设置 display:flex以及align-items:center

5. 方法五

适用于： 高度已知的元素
方法： 设置position:absolute以及top:50%，并将margin-top设置为 -1/2 的高度值。

三、水平垂直居中

可以适当结合水平居中与垂直居中的方法使用。下面是我比较常用的几个：

1.方法一

适用于： 高度和宽度已知的元素

div.wrap{
    background:#ddd;
    height:200px;
    position:relative;
}
.wrap div{
    background:#aaa;
    width:80px;  // 已知
    height:80px;  // 已知
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-40px;  // -1/2 width
    margin-top:-50px;  // -1/2 height
}

水平垂直居中

2.方法二

方法： 父元素设置display:flex，要居中的子元素设置margin:auto；

3.方法三

/*父元素 CSS 设置为：*/
.parent{
      display:flex;
      align-items:center;  /*垂直居中*/
      justify-content:center;  /*水平居中*/
}

---

PS:写的比较乱，还有很多方法没有写进来，如果了解了一些其他方法再更新吧，↖(^ω)↗。

---

参考阅读：
1.使用弹性盒子进行高级布局.
2.CSS实现垂直居中的5种方法