为什么这里的margin-top为-12.5%时div才垂直居中？

Question

为什么这里的margin-top为-12.5%时div才垂直居中？

发布于
2016-10-10

代码如下

<!DOCTYPE html>
<html>
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html,body{
height:100%;
}
div#wrap{
position:absolute;
top:50%;
left:50%;
margin-left:-25%;
margin-top:-12.5%;
display:table;
background-color:gray;
width:50%;
height:50%;
_position:relative;
overflow:hidden;

}
div#subwrap {
vertical-align:middle;
display:table-cell;
text-align:center;
_position:absolute;
_top:50%;
_left:50%;
}
div#content { 
_position:relative;
_top:-50%;
_left:-50%;
}
</style>
</head>
<body>
<div id="wrap">
    <div id="subwrap">
        <div id="content">
  现在我们要使这段文字垂直居中显示！
  <pre>
  div {
  padding:25px;
  border:1px solid #FF0099;
  background-color:#FFCCFF;
 }
 </pre>
        </div>
    </div>
</div>
</body>
</html>

这是使内部div居中的同时，外部div也相对于页面居中。外部div设置居中时top和left都移动了50%，所以为了让其居中，margin-top和margin-left我本来都设置为-25%。margin-left：-25%;确实让水平居中了，但垂直的话只有让margin-top的值为-12.5%，这是为什么。求告知。

css html

阅读 3.1k

1 个回答

hsinchu

✓ 已被采纳

因为margin-top设置百分比时的计算参考对象是父元素的宽度，而你说的12.5%也不是正好居中，只是因为1920接近1080的两倍而产生的错觉。
你要居中可以用left:25%和top:25%而不用margin

撰写回答