浏览器窗口缩小到宽度小于div模块时，如何让div模块始终显示正中间的内容？
代码如下：<divid="box"class="up10"style="width:1920px;height:800px;"><divid="banner"class=...
代码如下：
<div id="box" class="up10" style="width:1920px;height:800px;">
<div id="banner" class="tonglan"> <a href="#" target="_blank" data-spm-wangpu-module-id="5003-10409324140" data-spm-anchor-id="a1z10.1-b.w5003-10409324140.1"><img src="http://img02.taobaocdn.com/imgextra/i2/697597783/TB2XE5tcXXXXXboXXXXXXXXXXXX_!!697597783.jpg" alt=" 3" border="0"></a>
</div>
</div>
模块宽度是1920px不变的情况下，浏览器窗口的宽度小于1920px时，如何保持红色框始终在窗口正中间显示？
补充：图片显示比例保持100%大小。 展开
<div id="box" class="up10" style="width:1920px;height:800px;">
<div id="banner" class="tonglan"> <a href="#" target="_blank" data-spm-wangpu-module-id="5003-10409324140" data-spm-anchor-id="a1z10.1-b.w5003-10409324140.1"><img src="http://img02.taobaocdn.com/imgextra/i2/697597783/TB2XE5tcXXXXXboXXXXXXXXXXXX_!!697597783.jpg" alt=" 3" border="0"></a>
</div>
</div>
模块宽度是1920px不变的情况下，浏览器窗口的宽度小于1920px时，如何保持红色框始终在窗口正中间显示？
补充：图片显示比例保持100%大小。 展开
3个回答
展开全部
<script type="text/javascript">
var docEle = function()
{
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id)
{
var m = "mask";
if (docEle(_id)) document.body.removeChild(docEle(_id));
if (docEle(m)) document.body.removeChild(docEle(m));
//mask遮罩层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
_scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);
_scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
newMask.style.width = _scrollWidth + "px";
newMask.style.height = _scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#33393C";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
//新弹出层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDivWidth = 400;
newDivHeight = 200;
newDiv.style.width = newDivWidth + "px";
newDiv.style.height = newDivHeight + "px";
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = " ";
document.body.appendChild(newDiv);
//弹出层滚动居中
function newDivCenter()
{
newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";
newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";
}
if(document.all)
{
window.attachEvent("onscroll",newDivCenter);
}
else
{
window.addEventListener('scroll',newDivCenter,false);
}
//关闭新图层和mask遮罩层
var newA = document.createElement("div");
newA.innerHTML ="取消";
var newB = document.createElement("TEXTAREA");
newB.setAttribute("cols","40");
newB.setAttribute("rows","10");
newA.onclick = function(){
if(document.all)
{
window.detachEvent("onscroll",newDivCenter);
}
else
{
window.removeEventListener('scroll',newDivCenter,false);
}
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newB);
newDiv.appendChild(newA);
}
</script>
<body>
<a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
2015-03-21 · 知道合伙人互联网行家
freezing866
知道合伙人互联网行家
采纳数：145
获赞数：1032
六年网站开发经验，开发过的网站超过百个。擅长B2B、B2C、营销型网站开发。公司网址：www.wangyingshi.com
向TA提问 私信TA
关注
![]()
展开全部
把图片改成div用css背景方式来显示就可以居中而且不变形。
更多追问追答
追问
不用背景的方式能解决吗
追答
红色框的DIV用CSS样式绝对定位position: absolute
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div id="box" class="up10" style="width:1920px;height:800px; position:absolute; left:50%; margin-left:-960px;">
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
