垂直居中的奇思妙想

首先感谢【张鑫旭】这位大神的无私奉献，从浮动到各种css神技巧以及他独特的技术解释，让我学习到了写代码也可以这么开车。。。


CSS2 的 vertical-align 用于属性设置元素的垂直对齐方式，在这里用于设置同一行的元素都放置在父元素的中部。


父元素通过固定定位默认宽高100%，且内容通过 text-align 设置居中，通过设置 font-size 控制子元素文字默认大小，然后设置 white-space 控制行内元素不换行，最后设置 overflow 可以在子元素超出之后可滚动。


子元素通过伪元素来撑高，并且要作为行内块元素垂直居中，另外我们自己使用的 class 为 cont 的元素除了设置为行内块状元素以及垂直居中之外，要重置之前父元素可继承的属性。

<div class="page">
  <div class="cont">
  </div>
</div>

.page{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    text-align: center;
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
}

.page:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.cont{
    display: inline-block;
    vertical-align: middle;
    text-align: left;
    font-size: 16px;
    white-space: normal;
}