如何在大小动态变化的屏幕中心精确设置div

我想将div完全放置在大小动态变化的中心。如何在大小动态变化的屏幕中心精确设置div

<div id="containall"> 
    <div style="display:none" align="center" id="mainDiv"> 
    <div class="mainDiv" id="paste"></div> 
    <div class="midDiv" id="popup"><a href="#" onClick="hideDiv();" style="font-size:20px;float:right;margin:5px 5px 0 0px;padding:5px 0px 5px 9px;background:#000;-webkit-border-radius: 16px;-moz-border-radius:16px;border-radius:16px;padding-right:10px;text-decoration:none">X</a> 
     <img id="bearimage2" style="visibility:hidden;"> 
     <canvas id="tools_sketch" width="200" height="200"></canvas> 
    </div> 
</div> 
</div>

我正根据图像动态地改变画布的大小。为弹出的DIV的CSS像

#popup { 
    width:600px; 
    height:400px; 
    background:url(/BugClipper/bccss/bgtrans_bc.png); 
    position:absolute; 
    left:400px; 
    -webkit-border-radius: 9px; 
    -moz-border-radius: 9px; 
    border-radius: 9px; 
    margin:-600px 0 0 0; 
    border:2px solid #333; 
}

现在，当弹出窗口大小改变持有画布，它关系到屏幕的右侧，我必须滚动查看在画布上完整的图像。

请指导我如何设置的CSS，使其始终在屏幕上

来源

2013-04-17 Mahendra

我觉得你有4个太多的标签，这只是CSS。 – RobG

的中间显示您可以将这个CSS用于弹出DIV：

#popup { 
    width: 50%; 
    margin: 0 auto; 
}

来源

2013-04-17 05:17:15 Santosh

试试这个CSS

#popup { 
width:50%; 
height:400px; 
background:url(/BugClipper/bccss/bgtrans_bc.png); 

left:400px; 
-webkit-border-radius: 9px; 
-moz-border-radius: 9px; 
border-radius: 9px; 
margin:0 auto; 
padding:0; 
border:2px solid red; 
}

来源

2013-04-17 06:26:03

试试这个：

#popup { 
top: 50%; 
left: 50%; 
width: 600px; 
height: 400px; 
margin: -200px 0 0 -300px; 
position: fixed; 
}

Fiddle

来源

2013-04-17 06:52:58

如何在大小动态变化的屏幕中心精确设置div

回答

相关问题