页面上的中心div，宽度和高度为百分比和比例

Question

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

• 宽度页面为80％
• 宽度和高度百分比（例如宽度：100％;高度：60％）
• 设置最小和最大宽度和高度（例如，最小宽度：980px;最小高度：588px，最大宽度：1170px;最大高度：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;

即使您更改了浏览器的大小，也会将此框置于中央位置。