CSS居中方法集锦

这阵一直忙各路笔试面试，心越来越浮躁，也好久没有写些东西。不过也正是这些虐我千百遍的笔试面试题让我愈发地觉得确有必要整理一下知识点，让网上书上看的杂乱无章的东西形成自己的体系。

前一阵改活控的BUG（好吧其实是第N次改需求）时发现一个头疼的问题，在用line-height实现行内垂直居中后居然发现移动终端浏览器不支持这个，改成inline-block配合padding也是不感冒。然后在css-tricks上找了找，瞬间豁然开朗，麻麻再也不用担心我的居中问题啦！

看得比较散，稍微整理如下。

行内元素

这个比较简单直接，将行内元素的line-height设置为与父元素height等值，便可以达到垂直居中的效果。而水平居中则是用烂了的text-align: center，在不脱离文档流的情况下都是很坚挺的存在。说到这里就要顺便黑一黑他的兄弟vertical-align: middle了，用起来还是诸多限制。

固定大小的块级元素

接下来就是最近接触的一些小tricks。在已知容器宽高的情况下怎样让它在父容器内始终水平和垂直都居中呢？这里用到绝对定位的百分比偏移，

<style>
  .container {
    position: relative;
    height: 600px;
    background-color: #bbb;
  }

  .center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 100px;
    margin-top: -50px;
    margin-left: -75px;
    background-color: #555;
  }
</style>

<div class="container">
  <div class="center">
  </div>
 </div>

首先用绝对定位的偏移量确定了框体的位置，然后巧妙地利用负margin根据实际宽高调整，原理如下图：

未知大小的块级元素

已知大小的元素可以根据宽高来修正边距，那么如果宽高也未知呢？这才是检验真理的最终标准！首先我们想到，按照上一种方法的思路，把位移也变成百分比不就行了？于是我们很快想到CSS3的transform。

<style>
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #555;
}
</style>

CSS3固然很爽，但有时也不得不兼顾老版本IE的脾气，尽管微软已经开始全面推广spartan，对家里的老爷子也还是要敬三分，不得不保留下来。

兼容方案

在这里，我们只能想象之前提到过的vertical-align: middle，然而它只能在table里发挥作用，对布局限制太多，怎样利用它呢？这里不得不佩服css-tricks上作者的脑洞，下面是它的方法：

If we set up a "ghost" element inside the parent that is 100% height, then we vertical-align: middle both that and the element to be centered, we get the same effect.

简单说就是利用伪元素:before，在元素前创造一个隐藏的、高度为100%的"table column"，模拟出一个table布局，这样便可以利用vertical-align: center将子元素与其居中对齐。

最简单也是最高科技的方案

大道至简，最简洁的方法才是最牛逼的。最后再次把flex模型搬出来。

<style>
.container {
  display: flex;
  height: 600px;
  justify-content: center;
  align-items: center;
  background-color: #bbb;
}
</style>

寥寥几句，一切尘埃落定，这就是新技术的威力。不得不说flex是一个很方便的技术，在一些栅格布局的适配上做到了很多之前UI框架做的事情。可惜的是由于历史版本的原因，各浏览器的写法都有些微差别，IE之流的上古大神更是爱答不理，只得静待新标准的推进了。