元素完全居中的方法

如何简单方便地让元素居中呢？在不同情况下写法或许还得不一样，下面我们直入主题，说几个居中的方法：

方法一：（个人觉得最好用的一种）

.parent{
  position: relative;
}
.child {
  position: absolute;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
  height:20px;/*元素高度是必须的*/
}

注意：浏览器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10，这种方法在Windows Phone上不起作用

方法二、负margin值

这或许是最常用的方法。如果知道了各个元素的大小，设置等于宽高一半大小的负margin值（如果没有使用box-sizing: border-box样式，还需要加上padding值），再配合top: 50%; left: 50%;样式就会使块元素居中。

.child {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}
/*这是按照预想情况也能在工作在IE6-7下的唯一方法。*/

方法三、transform法

.child { 
  width: 50%;
  margin: auto;
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
          transform: translate(-50%,-50%);
}

注意：不支持IE8；需要写厂商前缀；会和其他transform样式有冲突；某些情况下的边缘和字体渲染会有问题；

方法四、table-cell法

.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
  display: table-cell;
  vertical-align: middle;
}
.is-Table .Center-Block {
  width: 50%;
  margin: 0 auto;
}

<div class="Center-Container is-Table">
  <div class="Table-Cell">
    <div class="Center-Block">
    <!-- CONTENT -->
    </div>
  </div>
</div>

方法五、inline-block法居中

基本方法是使用 display: inline-block, vertical-align: middle样式和伪元素让内容块在容器中居中。我的实现用到了几个在其他地方见不到的新技巧解决了一些问题。

内容区声明的宽度不能大于容器的100% 减去0.25em的宽度。就像一段带有长文本的区域。不然，内容区域会被推到顶端，这就是使用:after伪类的原因。使用:before伪类则会让元素有100%的大小！

.Center-Container.is-Inline { 
  text-align: center;
  overflow: auto;
}
 
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
  display: inline-block;
  vertical-align: middle;
}
 
.Center-Container.is-Inline:after {
  content: '';
  height: 100%;
  margin-left: -0.25em; /* To offset spacing. May vary by font */
}
 
.is-Inline .Center-Block {
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
}

 

<div class="Center-Container is-Inline">
  <div class="Center-Block">
    <!-- CONTENT -->
  </div>
</div>

注意：

• 需要额外容器
• 依赖于margin-left: -0.25em的样式，做到水平居中，需要为不同的字体大小作调整
• 内容区声明的宽度不能大于容器的100% 减去0.25em的宽度

方法六、Flexbox法

CSS未来发展的方向就是采用Flexbox这种设计，解决像垂直居中这种共同的问题。请注意，Flexbox有不止一种办法居中，他也可以用来分栏，并解决奇奇怪怪的布局问题。

.Center-Container.is-Flexbox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
     -moz-box-align: center;
     -ms-flex-align: center;
  -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: center;
     -moz-box-pack: center;
     -ms-flex-pack: center;
  -webkit-justify-content: center;
          justify-content: center;
}
/*不支持IE8-9*/

对照表

所用样式	支持的浏览器	是否 响应式	内容溢出后的样式	resize:both	高度可变	主要缺陷
Absolute	现代浏览器&IE8+	是	会导致容器溢出	是	是*	‘可变高度’的特性不能跨浏览器
负margin值	所有	否	带滚动条	大小改变后不再居中	否	不具有响应式特性，margin值必须经过手工计算
Transform	现代浏览器&IE9+	是	会导致容器溢出	是	是	妨碍渲染
Table-Cell	现代浏览器&IE8+	是	撑开容器	否	是	会加上多余的标记
Inline-Block	现代浏览器&IE8+&IE7*	是	撑开容器	否	是	需要使用容器包裹和hack式的样式
Flexbox	现代浏览器&IE10+	是	会导致容器溢出	是	是	需要使用容器包裹和厂商前缀（vendor prefix）