块级元素垂直居中（Flex布局方法）：

css部分：
 *{padding: 0;margin: 0;}
body,html,.wrap{width: 100%;height: 100%;}
.wrap{background: yellow;display: flex;-webkit-display: flex;align-items: center;-webkit-align-items: center; justify-content:center;-webkit- justify-content:center;}
.box{width: 100px;height: 100px;background: green;}

html部分：

<div class="wrap">
    <div class="box"></div>
</div>

效果图如下：

心得：

父元素宽高不定，设置width: 100%;height: 100%，

变为弹性盒子display: flex;-webkit-display: flex，

设置水平居中justify-content:center;-webkit- justify-content:center;

设置垂直居中align-items: center;-webkit-align-items: center;

子元素设置样式width: 100px;height: 100px;background: green;

 

希望能帮到小伙伴们哈~