我想将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,使其始终显示在屏幕中间
答案 0 :(得分:1)
您可以将此CSS应用于弹出式div:
#popup {
width: 50%;
margin: 0 auto;
}
答案 1 :(得分:1)
试试这个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;
}
答案 2 :(得分:1)
试试这个:
#popup {
top: 50%;
left: 50%;
width: 600px;
height: 400px;
margin: -200px 0 0 -300px;
position: fixed;
}
<强> Fiddle 强>