Html 如何使用百分比设置中心？
作为一个实验，我一直在尝试使用CSS中的百分比将一个DIV置于BODY标记的中心。我想我在某一点上找到了答案，但多亏了TopStyle的魔力，一旦你保存下来，我就失去了它 下面是我的HTML：Html 如何使用百分比设置中心？,html,css,css-position,center,Html,Css,Css Position,Center,作为一个实验，我一直在尝试使用CSS中的百分比将一个DIV置于BODY标记的中心。我想我在某一点上找到了答案，但多亏了TopStyle的魔力，一旦你保存下来，我就失去了它 下面是我的HTML： <html> <head> <link href="shadow.css" rel="stylesheet" type="text/css" /> </head> <body> <di
<html>
<head>
<link href="shadow.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="box"></div>
</body>
</html>
这样，即使没有内容拉伸，盒子也可以接受80%的高度 为什么我的宽度、最小宽度和最小高度是这样的？
因为我希望box DIV占据80%的可用空间，所以使用minimum是有意义的。我使用像素宽度来确保无论区域有多小，都不会小于740px，从而导致浏览器激活水平滚动条。理论上，如果内容通过80%的可用区域，则内容高度应激活垂直滚动条 现在的诀窍是让它完全居中，并在盒子周围保持10%的空间。我尝试过将“边距：10%；”应用于主体，然后将“填充：10%；”应用于主体，最后将“边距：10%”应用于长方体DIV。所有这些选择都给了我相同的结果：它水平居中，但垂直方向的行为奇怪。我的四周都没有足够的空间。唯一的情况是，box DIV似乎使用了80%的可用空间 看来这应该是对的。长方体DIV占80%，每侧的利润占10%（垂直20%，水平20%），占100%。不知道为什么它不起作用 我发誓我也曾以类似的方式工作过，现在我已经失去了它 有人解释为什么百分比显示不正确，我需要什么解决方案吗
谢谢 移除
位置：绝对来自#框
将此添加到#框中
-边距：0自动
扔掉正文中的东西
试着这样做：
*
{
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缩小到您的限制以下，因为最小宽度和最小高度不起作用。最终结果应该是什么？垂直边距占车身宽度的10%！所以对于宽屏幕，你会有一个巨大的上边距（看起来像20+）。thirtydot，我想看到的是一个浅灰色背景，白色框死点，两边间隔均匀。无论可视区域延伸了多少，它的所有侧面都应该有空间。在FF中，这个例子唯一有效的时候是当可视区域是或几乎是完全正方形时！所以这就解释了为什么双方都不平等。它基于水平空间的垂直百分比。有趣。那么，现在我该怎么办呢？试试我答案中的代码，它应该可以在任何分辨率下工作。Myles，当我尝试你的解决方案时，长方体DIV水平居中，高度收缩到0px，因为我删除了“position:absolute；”。我查看了你提供的链接，我看到了使用我的解决方案所看到的内容。我有一个16:9比例的监视器，当我将FF浏览器设置为全尺寸时，框被向下推，几乎接触到可视区域的底部。根据Jaroslav Jandek的说法，这是因为上下页边距基于水平空间，而不是我所期望的垂直空间。现在我只想弄明白如何“欺骗”它去做代码中似乎合乎逻辑的事情。射击和得分！干得好！这正是我想要的结果。谢谢但有一个问题。我在min height上添加百分比设置的原因是，如果它是空的，我希望它占据80%的空间。但是，如果内容向下推并传递它，我希望框展开以适合内容。现在，内容将推动通过包含分区的边界。思想？注意：我继续并用高度和宽度反转了最小高度和最小宽度，它解决了我在Chrome和FF中的问题，但在IE中没有如您所指出的那样。不过，我称之为胜利@linnium:溢出仍然可能发生，因为您同时指定了height
和minheight
。要允许DIV环绕文本，您必须删除高度
（在IE中看起来很难看），因此可以使用高度：500px！ie（虽然这是无效的CSS，但在FF中效果很好，在IE中也不错）。
*
{
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;
}