css浮动元素居中布局问题

为什么child就是竖直居中不了呢??
<!doctype html>



<br> .parent{<br> position:relative;<br> border:1px solid #ddd;<br> height:1.5em;<br> }<br> .wraper{<br> float:left;<br> position:absolute;<br> left:50%;top:50%;<br> clear:both;<br> }<br> .child{<br> position:relative;<br> left:-50%;top:-50%;<br> }<br>




我水平居中了哦



<br> $=function(){<br> var elem=this===window?document.querySelectorAll(arguments[0]):this querySelectorAll(arguments[0]);<br> return elem.length==1?elem[0]:elem.length&gt;1?elem:null;<br> }<br> var parent=$(&quot;.parent&quot;); <br> var wraper=$(&quot;.wraper&quot;);<br> var child=$(&quot;.child&quot;);<br> function getStyle(obj){<br> var style=getComputedStyle(obj);<br> return &quot;向下移了:&quot;+style.top+&quot;;&quot;+&quot;我的高度:&quot;+style.height;<br> }<br> console.log(getStyle(parent));<br> console.log(getStyle(wraper));<br> console.log(getStyle(child));<br>

http://www.jb51.net/article/70767.htm

你的child top 50%,还需要减去内容的行高一般才水平居中

 .child {
    left: -50%;
    margin-top: -11px;/*行高不一样修改这个值*/
    position: relative;
    top: -50%;
}

垂直居中
.child{
position:relative;
top:50%;
left:50%;
margin-left:-(自孩子宽度的一半)px;
margin-top:-(自孩子高度的一半)px;
}