fixing div in center of page with different width and height

Question

i have a div and it appears only if the user hits a link from category list i.e

category 1 category 2 category 3

and loading content with jquery $.ajax() so the width of div chages according to the returned data no i want to center the div in center of page...

Answer 1

If you want to put an element exactly in the center of your browser , Assign theses styles to the element:

.box {
width: 200px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
margin: -50px 0 0 -100px;
}

Here i supposed my element has 100 px height and 200 px width, So in margin i put it 1/2 of real size . This way my element is exactly in center of my page , no matter how size is my browser .

Here is an online demo