塊級元素垂直居中（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;

希望能幫到小夥伴們哈~