CSS实现垂直居中

        居中可分为垂直居中和水平居中，水平居中直接设置元素margin: 0 auto就可以实现。

首先在一个页面上写一个div，定义宽高为200px，背景颜色为蓝色：

要实现div的水平居中可直接在div中设置margin: 0 auto;

而垂直居中则相对复杂，在实现垂直居中之前要先把div的祖先元素html和body的宽高设置为100%，因为他们默认的是0，所以要清除样式，即把margin和padding都设置为0。

然后需要让div上下移动，一般top属性可以使得元素向下偏移，但由于默认情况下，position的值为static，就是静止的无法移动，元素在在文档流里是从上往下，从左到右紧密的布局的，所有不能直接通过top和left属性改变他的偏移。所以要移动元素的位置就要把position设置为不是static的其他值，如relative，absolute，fixed等。然后就可以通过top，bottom，right，left等属性使他在文档中发生位置偏移。其中relative是不会使元素脱离文档流，absolute和fixed则会，也就是说relative会占据着移动之前的位置，但是absolute和fixed不会。

设置position：relative:

此时页面还没有任何变化，因为还没有设置他的垂直偏移。垂直偏移需要用到top属性，他的值可以是具体的像素（px）也可以是百分数（%）。因为我们不知道父元素body的具体高度，所以是不可以通过像素来偏移的，因而要用百分数。因为要居中所以设值为50%：

效果如图所示：

如效果图所示，div在垂直方向上并没有居中，但是明显下移了，因此要让div向页面的中心移动。

        通过观察可以看出来div是在页面中心位置之下，因此只要将div向上移div高的一半就可以实现div的垂直居中了。这时候可以通过使用margin-top属性来设置，因为div自身的高度是200px，所以需要设置他的margin-top值为-100。因为要向上偏移所以要用负数。

由效果图可以看到，div已经垂直居中了。