在说垂直居中之前，我们先回顾一下 水平居中
- 如果它是一个行内元素，对父元素应用 text-align: center 即可
- 如果它是一个块级元素，对元素自身应用 margin: auto 即可
设计场景
- 垂直居中是现实开发中常见的需求之一
- 当要对宽高不固定的元素进行垂直居中的时候，开发的哥哥们就要挠头了
基于绝对定位的解决方案
- 结构：
<div class="main">
<h1>标题</h1>
<p>固定宽高元素垂直居中</P>
</div>
- 风格：
.main {
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
width: 200px;
height: 100px;
}
之前在[《网页设计手法之“满幅的背景，定宽的内容”》][1]一文中，有讲过calc()函数，基于该函数，我们可以对上面的风格做个优化：
.main {
position: absolute;
left: calc(50% - 100px);
top: calc(50% - 50px);
width: 200px;
height: 100px;
}
很显然，这个方法的最大局限性在于 元素的宽高必须是固定的；但很多时候，元素的大小是由其内容决定的，我们就得找一个 **百分比值是以自身的宽高为基准的属性 **
.main {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
基于视口单位的解决方案
当不使用绝对定位的时候，我们就会丢失left和top，此时我们面临的问题是：如何把这个元素的左上角放置在容器的正中心？
.main {
width: 200px;
margin: 50vh auto 0;
transform: translateY(-50%);
}
结合了 固定宽度+margin 的水平居中方法
使用视口单位vh，即1vh表示视口高度的1%；它是以整个视口为参照标准的
注意：它只适用于在视口中居中的场景
基于FlexBox的解决方案
body {
display: flex;
min-height: 100vh;
}
.main {
margin: auto;
}
注意：
待居中元素的父元素 display: flex + 待居中元素的父元素的固定高度 + 待居中元素margin: auto，可以实现水平垂直方向上的居中；
如果浏览器不支持Flexbox，垂直居中就会丢失，居中的元素就会紧贴着顶部，看起来还是可以接受的，也算是一种 优雅降级 吧
[1]:http://www.jianshu.com/p/a92f8f8f4d82
《CSS SECRETS》
