作为实验，我一直在尝试使用 CSS 中的百分比将 DIV 置于 BODY 标记的中心。我想我曾经想通了，但由于 TopStyle 的魔力，一旦你保存就没有历史，我把它弄丢了。
所以，这是我的 HTML:
<html>
<head>
<link href="shadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>
还有，这是我的 CSS:
*
{
margin: 0;
padding: 0;
}
body
{
background-color: #EEEEEE;
margin: 10%;
}
div#box
{
position: absolute;
background-color: #FFFFFF;
width: 740px;
min-width: 80%;
min-height: 80%;
border: #CCCCCC thin solid;
}
回答您的直接问题:
为什么我要在盒子上使用绝对定位？
这样盒子即使没有内容也能接受 80% 的高度。
为什么我的 width、min-width 和 min-height 是这样的？
因为我希望盒子 DIV 占用 80% 的可用空间，所以使用最小值是有意义的。我正在使用像素宽度来确保无论区域变得多小，它都不会比 740px 更薄，从而导致浏览器激活水平滚动条。理论上，如果内容推送超过可用区域的 80%，它们的内容高度应该激活垂直滚动条。
现在的诀窍是让它死点居中并在盒子周围保持 10% 的空间。我试过应用“ margin :10%；”到 BODY，然后是“填充:10%；”到 BODY，最后“margin: 10%”到方框 DIV。所有这些选择都给了我相同的结果:它水平居中但在垂直方向上表现得很奇怪。我没有得到四面八方的空间。唯一符合预期的是盒子 DIV 确实使用了 80% 的可用空间。
看来这应该是对的。方框 DIV 占 80%，边距各占 10%(垂直 20%，水平 20%)，即 100%。不确定为什么它不起作用。
我发誓我曾经以类似的方式工作过，但现在我失去了它。
有没有人解释为什么百分比显示不正确以及我需要什么解决方案？
谢谢!
最佳答案
像这样尝试:
*
{
margin: 0;
padding: 0;
}
body { background-color: #EEEEEE; }
div#box
{
position: absolute;
border: #CCCCCC thin solid;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
min-width: 740px;
min-height: 500px;
}
IE 将允许 DIV 缩小到您的限制以下，因为最小宽度和最小高度不起作用。
关于html - 如何使用百分比居中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5285709/