css浮动元素居中布局问题 5C

为什么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>

3个回答

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

 .child {
    left: -50%;
    margin-top: -11px;/*行高不一样修改这个值*/
    position: relative;
    top: -50%;
}
weixin_36670912
weixin_36670912 回复showbo: 分开用的
大约 3 年之前 回复
showbo
支付宝加好友偷能量挖 回复weixin_36670912: 你top值不一样肯定后去到的肯定不一样啊。。
大约 3 年之前 回复
weixin_36670912
weixin_36670912 为啥dhild的top:-9px 与top:-50px 两种情况console.log出来的结果一样但是显示效果却又不同呢?
大约 3 年之前 回复

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问