CSS Dynamic Control div Center

1. So-called dynamic: even if you manually drag the browser, Div will automatically center

2. I've always thought this thing was JavaScript,

Step: By first getting the height and width of the page,

Then define the height and width of the Div,

Finally, the top value of the div is calculated by the above value = (heght-div height of the page)/2

Left value of div = (width of width-div of page)/2

and to achieve dynamic centering, you have to add the OnResize event to the body

In short, very troublesome, very disgusting, but one advantage, is compatible with most of the browser

3. Later query data found that the same action can be done with CSS, but also more simple,

Yes, that's right, it's pretty easy to understand:

Suppose the ID of the div control is popdiv:

#Popdiv {

/ * This position:fixed works, generating relatively positioned elements that are positioned relative to their normal positions. */
position: fixed;

     /* here is the margin set */
     margin : auto;
Left : 0;
Right : 0;
     top : 0;
     bottom : 0;

/ * Set div width and height * /
width: 400px;
height: 280px;

/ * After setting out of range, hide the outside of the section * /
overflow: hidden;

/ * Set Border * /
border: 2px solid #AEBBCA;

/ * Set Background color * /
Background-coloR: #EEF1F8;

/ * Set the mouse style * /
cursor: move;
}

You can click here to fill in the following position knowledge: http://www.w3school.com.cn/cssref/pr_class_position.asp

Pros: Yes, so we can achieve our requirements, not only centering , but also dynamic centering

( This div is always centered in the browser, regardless of whether there are scroll bars, or if you pull the scrollbar or change the browser size )

Cons: Old artifacts that don't support dinosaur levels IE6.0 browsers below

CSS Dynamic Control div Center