居中‘魔法’总结

作为一个前端程序员，各种居中的需求会经常遇到，比如说文本居中，水平居中，垂直居中，浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。
因此总结了几种关于居中的实现方法，可能不是很全面，希望大家共勉，我们只需要掌握自己喜欢的几种便捷的方式，在之后开发的过程中，可以大大提高工作的效率。

该文章不涉及复杂的布局，只是单纯简洁的举例说明居中的问题，具体在项目过程中选择哪种方法主要还要根据实际情况（比如浏览器兼容性，移动端还是PC端等），若有问题欢迎指正，文章围绕以下的布局实现：

HTML部分：

<div class="contain">
    <div class="center">居中部分</div>
</div> 

1:已知居中的元素高度，可以支持图片居中

 .contain{
    height:100px;
    width: 200px;
    background-color:red;
    position:relative;
}
.center{
    height: 20px;
    text-align:center;
    overflow:auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    vertical-align:middle;
}

*总结：以上方法比较常用，称为绝对居中；适合对要居中的对象设置高度的情况下，未设置高度时候是失效的；
（1）可以完美支持图片居中；
（2）支持跨浏览器，包括IE8-IE10；
（3）支持高度，宽度百分比%属性值和min-/max-属性；
（4）如果没有使用box-sizing属性时，是否设置padding都可实现居中；

</br>

2:负外边距

 .center {
   width: 300px;  
   height: 200px;  
   text-align: center;
   position: absolute;  
   top: 50%; left: 50%;  
   margin-left: -150px;  
   margin-top: -100px; 
   background-color: lightblue;
} 

总结：该方法用于块元素尺寸已知的情况下，比较流行；主要是外边距margin取负数，大小为width/height（不使用box-sizing: border-box时包括padding）的一半，再加上top: 50%; left: 50%;）如果设置了padding值，则margin-left= (width + padding)/2 ,margin-top=(height + padding)/2 ;
IE兼容性好, 但是不能自适应并且不支持百分比尺寸和min-/max-属性设置。

以下均为可变高度的方法：

3:table,table-cell

 .contain {
    display:table;
    height:200px;
    width:200px;
    background-color:red;
}
.center {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
} 

*总结：该方法是比较原始的方法，内容块高度会随着实际内容的高度变化，浏览器兼容性也较好；

4:行内块元素 inline-block

.contain{
  margin: 200px 100px;
  position:relative;
  height:150px;
  width:200px;
  background-color:lightgreen;
  text-align:center;
}
 .center{
  display:inline-block;
  vertical-align:middle;
} 
.contain:after{
  content: '';
  display:inline-block;
  height: 100%;
  vertical-align:middle;
  background-color:lightgreen;  
}

总结：该方法比较复杂，代码量比较多，兼容性较好。关键在于边上设置高100%，宽度为0的伪元素，也可以用一个宽度为0 的行内块元素代替伪元素，

5:transform

 .contain{
   position:relative;
   height:200px;
   width:200px;
   background-color:lightgreen;
 }
 .center {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
 } 

总结：是我比较喜欢的方法，代码量较少，也容易理解，但是不兼容IE8；

6:flex

 .contain {
  display:flex;
  height:200px;
  width:200px;
  background-color:red;
  justify-content: center;
  align-items: center;
} 

总结：该方法也比较流行，是CSS3的新属性，代码易于理解，若用于PC开发的话，它不兼容IE8/IE9，不推荐，移动端用的较多；