css中的居中

看到一个总结很全的居中，本文是其部分译文，Absolute Centering

一、负边距法

这是最常用也是唯一兼容IE6/7的方法

 .is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
}

但这种方法有一个很明显的不足，就是需要提前知道元素的尺寸。否则margin负值的调整无法精确。此时，往往要借助JS获得。

优点: 支持所有的浏览器，包括IE6/7；代码量较少缺点: 非响应式。不基于百分比尺寸工作，不能设置MIN-/ MAX- 内容可溢出容器需要用 padding来补偿 margin 或者使用 box-sizing: border-box

二、translate偏移法

Css3中可以使用transform代替margin. transform中translate偏移的百分比值是相对于自身大小的，于是，我们可以：

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

优点：

```
 内容可变高度
```
```
 代码量少
```

缺点： 3. IE8不支持 4. 属性需要写浏览器厂商前缀 5. 可能干扰其他transform效果 6. 某些情形下会出现文本或元素边界渲染模糊的现象

三、表格单元格（Table-Cell）

总的说来这可能是最好的居中实现方法，因为内容块高度会随着实际内容的高度变化，浏览器对此的兼容性也好。最大的缺点是需要大量额外的标记，需要三层元素让最内层的元素居中。 HTML：

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

CSS：

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

优点：

```
 高度可变
```
```
 内容溢出会将父元素撑开。
```
```
 跨浏览器兼容性好。
```

缺点：需要额外html标记

四、margin:auto实现绝对定位元素的居中

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

解释：通过以上描述，绝对居中（AbsoluteCentering）的工作机理可以阐述如下： 1、在普通内容流（normal content flow）中，margin:auto的效果等同于 margin-top:0;margin-bottom:0。 2、position:absolute使绝对定位块跳出了内容流，内容流中的其余部分渲染时3、为块区域设置top: 0; left: 0; bottom: 0; right: 0;将给浏览器重新分配一个边界框，此时该块block将填充其父元素的所有可用空间，父元素一般为body或者声明为position:relative;的容器。 4、给内容块设置一个高度height或宽度width，能够防止内容块占据所有的可用空间，促使浏览器根据新的边界框重新计算margin:auto 5、由于内容块被绝对定位，脱离了正常的内容流，浏览器会给margin-top,margin-bottom相同的值，使元素块在先前定义的边界内居中。

优点： 1.支持跨浏览器，包括IE8-IE10. 2.无需其他特殊标记，CSS代码量少 3.支持百分比%属性值和min-/max-属性 4.只用这一个类可实现任何内容块居中 5.不论是否设置padding都可居中（在不使用box-sizing属性的前提下） 6.内容块可以被重绘。 7.完美支持图片居中。缺点： 1.必须声明高度（查看可变高度Variable Height）。 2.建议设置overflow:auto来防止内容越界溢出。 3.在Windows Phone设备上不起作用。五、Flexbox

这是CSS布局未来的趋势。Flexbox是CSS3新增属性，设计初衷是为了解决像垂直居中这样的常见布局问题。相关的文章如《Centering Elements with 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/IE9不支持。
```

 Body需要特定的容器和CSS样式。

 运行于现代浏览器上的代码需要浏览器厂商前缀。

```
 表现上可能会有一些问题
```