position实现块级元素垂直居中

块级元素垂直居中（position方法），

css部分：

*{padding: 0;margin: 0;}
body,html,.wrap{width: 100%;height: 100%;}
.wrap{background: red;position: relative;}
.box{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);width: 100px;height: 100px;background: yellow;}

html部分：

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

效果图：

心得：

父元素宽高不定，设为body,html,.wrap{width: 100%;height: 100%;}

子元素设置样式.box{;width: 100px;height: 100px;background: yellow;}，添加绝对定位position: absolute;，

子元素绝对定位后，父元素添加相对定位.wrap{background: red;position: relative;}

子元素垂直居中top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);

哇咔咔~希望对小伙伴们有帮助呀~~