页面div的垂直居中问题，以及自适应问题（手机端和PC端公用）

用普通的方法，我们很难将div垂直居中，实现起来不仅有诸多限制，而且特别麻烦，我给大家介绍的是flex布局，只要给div加上以下样式：

    .vertical-container{
        flex-wrap:wrap;
        -webkit-display:flex;
        display:flex;
        -webkit-align-items:center;
        align-items:center;
        -webkit-justify-content:center;
        justify-content:center;
    }

那么class为vertical-container的div所有的直接子元素都会垂直居中，但不作用于二级子代。

接下来我所说PC和手机端自适应的问题，我采用了CSS3-Media的解决方案：

写两套样式，一个手机端，一个pc端：

举例：

当屏幕较大时（大于750px）

    @media screen and (min-width: 750px){

    这时样式里的宽高可以写死　　

   ｝

当屏幕较小时（小于750px）

    @media screen and (min-width: 750px){

    这时样式里的宽高要自适应，取100%屏幕

   ｝