居中(水平/垂直)那些事

居中算是Web页面制作中最基本的设计需求之一了，这篇文章就说说css和js实现居中的一些方案，以及采取这些方案的条件。

1.水平居中

看到水平居中，我们就想到 margin:0 auto; 就这么一句，很简单，但是使用这种自适应居中也是有条件的。

首先，我们必须要知道容器的宽度，以设置width属性。其次，对容器定位也有要求，position:absolute 就会使居中失效。

那么当我们无法确定宽度的时候，要如何处理水平居中呢？有一种相对+浮动的解决方案，看一下下面的代码：

HTML：

<div id="outter">
    <span id="inner">123</span>
</div>

CSS:

#outter{
    position: relative;
    left: 50%;
    float: left;
}

#inner{
    position: relative;
    right: 50%
}

不过这种方案的缺点也很明显，用到浮动会造成其他的一些布局问题，比如父容器的高度被清除等等。但是相对于其他一些方法，比如inline-block，算是较优解法了。

2.垂直居中

主要推荐一篇文章：http://sofish.de/1909

文章里介绍了三种垂直居中的方案，在知道元素高度的情况下，当然第一种方法是最适合的。作者推荐的通用解决方案也是种不错的解法。

3.js辅助居中

在无法知道宽高的时候，用js DOM的offsetWidth/offsetHeight属性取得容器宽高，然后设定绝对定位。或是配合position: relative，取得元素的宽高，设置margin-top/left的值。也是种简单且使用的做法。