在页面上居中 div，宽度和高度为百分比和比例

Question

我需要在页面上居中放置一个具有以下特征的 div：

• 页面宽度为 80%
• 以百分比表示的宽度和高度（例如宽度：100%；高度：60%）
• 设置最小和最大宽度和高度（例如 min-width:980px; min-height:588px 和 max-width:1170px; max-height:702px）
• 如果我调整页面大小，则 div 的大小将与页面垂直和水平成比例地调整（如果我仅垂直调整页面大小，您还必须水平调整窗口大小）

你能帮忙吗？ 谢谢。

----HTML

<div id="content">
    <div id="box">
        text
    </div>
</div>

----CSS

    <style type="text/css">
    #content {
        width:80%;
        background:#000;
        margin:0 auto;
    }
    #box{
        width:100%;
        height:60%;
        background:red;
        min-width:980px;
        min-height:588px;
        max-width:1170px;
        max-height:702px;
    }
</style>

Answer 1

在此处查看更新的小提琴。

http://jsfiddle.net/rmuL9/10/

我已添加到#box CSS

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

即使您更改浏览器的大小，这也会使框居中。