如何精确设置div的大小动态变化的屏幕中心 [英] How to set div exactly in the center of screen whose size is changing dynamically

问题描述

I want to place the div exactly in the center whose size is changing dynamically.

我想将div正好放在大小动态变化的中心。 >
< div style =display：nonealign =centerid =mainDiv>
< div class =mainDivid =paste>< / div>
< div class =midDivid =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;边界半径：16px的;填充右：10px的;文字修饰：无> X< / A>
< img id =bearimage2style =visibility：hidden;>
< canvas id =tools_sketchwidth =200height =200>< / canvas>
< / 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>

我会根据图像动态地改变画布大小。
POPUP div的css就像

I am changing the size of canvas dynamically according to image it holds. the css for POPUP div is like

#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;
}

当弹出窗口大小更改为保持画布时，它会向右我必须滚动才能在画布上查看完整图像。

NOw when the popup size is changed to hold canvas, it goes to the right side of screen and i have to scroll to view full image on canvas.

请指导我如何设置css，使其始终显示在屏幕中间

Please guide me how to set css so that it always display on middle of screen

推荐答案

试试这个：

Try this:

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

小提琴

Fiddle

这篇关于如何精确设置div的大小动态变化的屏幕中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！