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

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

水平居中

---

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

1. margin + 定宽

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    width: 100px;    margin: 0 auto;  }</style>

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

2. table + margin

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: table;    margin: 0 auto;  }</style>

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

兼容性：IE8及以上

3. inline-block + text-align

<div class="parent">  <div class="child">Demo</div></div><style>  .child {    display: inline-block;  }  .parent {    text-align: center;  }</style>

不定款的另一种方式

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

4. absolute + transform

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    transform: translateX(-50%);  }</style>

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

5. absolute + margin-left

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {        position: relative;  }  .child {    position: absolute;    left: 50%;    width: 100px;    margin-left: -50px;  /* width/2 */  }</style>

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

6. flex + justify-content

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center;  }</style>

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

垂直居中

---

1. table-cell + vertical-align

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: table-cell;    vertical-align: middle;  }</style>

兼容性好

2. absolute + transform

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    top: 50%;    transform: translateY(-50%);  }</style>

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

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

3. flex + align-items

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    align-items: center;  }</style>

同上2一样，兼容性稍差

水平垂直居中

---

1. absolute + transform

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    position: relative;  }  .child {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);  }</style>

不再赘述，兼容性稍差

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

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    text-align: center;    display: table-cell;    vertical-align: middle;  }  .child {    display: inline-block;  }</style>

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

3. flex + justify-content + align-items

<div class="parent">  <div class="child">Demo</div></div><style>  .parent {    display: flex;    justify-content: center; /* 水平居中 */    align-items: center; /*垂直居中*/  }</style>

不再赘述，兼容性稍差