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>

不再赘述，兼容性稍差