元素在父元素内竖直居中

html部分 创建两个块元素 其中 center为box的子元素

<div class="box">

　　<div class="center"></div>

</div>

 

css部分

.box{ width:100px;height:100px} /*确定父元素大小*/

.center{ width:20px;height:20px;position:relative;top:50%;transform: translate(0,-50%);}

 

解析：position:relative;top:50%; 将子元素定位至父元素中心 50%为父元素高度的50%;

　　　transform: translate(0,-50%);对子元素.center进行2D移动；50%为子元素高度的50%；

优点：用百分比使元素竖直居中，对不确定父元素，子元素尺寸的情况同样适用；

缺点：transform属性对低版本ie不支持；