CSS常用布局之——水平垂直居中解决方案

纵观css盒子（标准or非标准）常用的布局中，我大致分为2类，一种是居中，一种是等分。居中包含了水平居中，垂直居中，水平垂直居中；等分又包含了等分块布局，等分高布局。

水平居中

---

先看看水平居中的布局方案

1. margin + 定宽

  
Demo

这种定宽居中比较常见的，就不多解释了

**2. table + margin **

  
Demo

display: table 在表现上类似 block 元素，但是宽度为不定宽。

兼容性：IE8及以上

3. inline-block + text-align

  
Demo

不定款的另一种方式

兼容性：可以兼容 IE 6 和 IE 7

4. absolute + transform

  
Demo

定宽的另一种方法，但transform属于css3的标签（兼容性考虑）

5. absolute + margin-left

  
Demo

定宽的另一种方法，相比第四种他的兼容性好

6. flex + justify-content

  
Demo

flex布局，未来布局的趋势，目前只有兼容性比较差（移动端推荐使用）

垂直居中

---

1. table-cell + vertical-align

  
Demo

兼容性好

2. absolute + transform

  
Demo

绝对定位脱离文档流，不会对后续元素的布局造成影响

兼容性不是太好（by the way，这里所说的兼容性不太好都意味着对 IE 8 及其以下版本）

3. flex + align-items

  
Demo

同上2一样，兼容性稍差

水平垂直居中

---

1. absolute + transform

  
Demo

不再赘述，兼容性稍差

2. inline-block + text-align + table-cell + vertical-align

  
Demo

兼容性好，需要兼容性较好的推荐使用

3. flex + justify-content + align-items

  
Demo

不再赘述，兼容性稍差