html - 在页面上居中 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

在此处检查更新的 fiddle 。

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

我已经添加到#box CSS

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

即使您更改浏览器的大小时，这也会将框定位在中央。