一问就蒙(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

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