一问就蒙(1)--垂直居中

最近老是面试，面别人和被人面，有很多常常考察的知识点，准备总结一下，写一个一问就蒙系列。

如何将一个子div垂直居中，这是一个常被问到的题目。直接进入正题，其实有这么几种方案：

1、padding/margin

这是最土的方案，比如外部div包裹高度为固定的30px，内部div高度为固定的10px，那么居中方案很简单，只要给内部的div设置一个padding/margin就可以了。

代码如下:

    .inner-div {
        padding(margin)： (( 外层高度 - 内层高度 ) / 2) 0;
    }
2、绝对定位

使用绝对定位来进行垂直居中的设置，可能是最常用的了，基本原理是：将子元素相对于父元素移动50%，但由于绝对定位的坐标原点为左上角，所以要再将子元素向回修正该元素宽度的一半,这样则元素刚好居中：

代码如下（假设子元素宽度为200px）：

    .inner-div {
        position: absolate;
        top: 50%;
        margin-top: -100px;
    }

以上方法是传统方法，如果继续深究，当不知道子元素高度的情况怎么办呢？毕竟有很多时候，我们是没法直接知道元素的宽度的。

所以有了以下这种进阶方案，这个需要用到css3的一些属性，具体浏览器兼容请戳这里；

具体方法如下：

    .inner-div {
        position: absolate;
        top: 50%;
        /*利用css3的属性，进行移动,就不需要知道元素具体高度了*/
        transform： translateY(-50%);
    }
3、终极解决方案

使用css3中提供的flexible box来解决问题，具体兼容性请戳 这里； 由于兼容性问题，代码需要增加前缀：

    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;     
    display: -ms-flexbox;
    -ms-flex-pack: center;
    -ms-flex-align: center;

一般来说，如上代码增加到子元素上即时生效，如果出现问题，放到外层试试 ：P

综上，这就是我了解到的几种常用的垂直居中的方式，如果有一些别的方式，希望不吝赐教，谢谢！

Table of Contents