我需要在页面上居中放置一个具有以下特征的 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>
最佳答案
在此处检查更新的 fiddle 。
我已经添加到#box CSS
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
即使您更改浏览器的大小时,这也会将框定位在中央。
关于html - 在页面上居中 div,宽度和高度作为百分比和比例,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24326629/