为什么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>1?elem:null;<br> }<br> var parent=$(".parent"); <br> var wraper=$(".wraper");<br> var child=$(".child");<br> function getStyle(obj){<br> var style=getComputedStyle(obj);<br> return "向下移了:"+style.top+";"+"我的高度:"+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;
}