-webkit-box 的用法
通常，在移动端要实现水平方向平分宽度的布局，会使用 -webkit-box 来布局。
它的使用方法是：
<div class='parent'>
<div class='child'></div>
<div class='child'></div>
<div class='child'></div>
</div>.parent {
display: -webkit-box;
}
.child {
-webkit-box-flex: 1;
width: 1px;
}以上布局会使得三个.child元素平分.parent元素的宽度。
在.child元素内添加绝对定位的子元素
<div class='parent'>
<div class='child'>
<div class='ele'></div>
</div>
<div class='child'>
<div class='ele'></div>
</div>
<div class='child'>
<div class='ele'></div>
</div>
</div>.parent {
display: -webkit-box;
margin-top: 100px;
background-color: #ddd;
}
.child {
position: relative;
-webkit-box-flex: 1;
width: 1px;
}
.ele {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
background-color: blue;
}这种定位在chrome浏览器上是显示正常的，ele元素是在child元素的正中间。
但是，在微信端页面上，ele元素只是在child的水平方向居中，垂直方向上不居中，而是超出child元素，在child上方。
显示的效果是：
解决方法
要解决这个问题，只需要在child元素上添加一个固定的高度即可。代码如下：
.child {
position: relative;
-webkit-box-flex: 1;
width: 1px;
height: 500px;
}显示的效果是：
原因分析
在浏览器中，绝对定位是脱离文档流的，所以ele元素不能撑起child元素的高度，导致child的高度是0，所以ele会顶到浏览器顶部。
给child元素设置高度后，ele的绝对定位就能通过child的高度来计算位置。
（完）