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

【问题标题】：How to set div exactly in the center of screen whose size is changing dynamically如何将 div 精确设置在大小动态变化的屏幕中心
【发布时间】：2013-04-17 14:52:58
【问题描述】：

我想将 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>

我正在根据画布保存的图像动态更改画布的大小。 POPUP 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 使其始终显示在屏幕中间

【问题讨论】：

我觉得你的标签太多了，这只是 CSS。

标签： javascript jquery css html

【解决方案1】：

您可以将此 CSS 应用于弹出 div：

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

【讨论】：

【解决方案2】：

试试这个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;
 }

【讨论】：

【解决方案3】：

试试这个：

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

Fiddle

【讨论】：