set the position of a div in center

[sajisweetgirl 0]

Hi

 

how can I set the position of the background div in center vertically , same space between top and bottom . in this example.

 

http://w3schools.com/css/tryit.asp?filename=trycss_transparency

 

i tried margin-top:auto; margin-bottom:auto; but it didn't work!

 

thanks

 

[Ingolme 1,032]

There are two ways to center something vertically.

 

The first one is to set the position to "absolute", set the top property to 50%, set the left property to 50% and then give a negative left margin of half the width of the box and a negative top margin of half the height of the box. This method requires the box to have a set width and height.

Example:

 

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

 

The second example might not work in older versions of Internet Explorer, I might be remembering it incorrectly. Display the parent of the box as a table cell and set its vertical-align to middle.

 

.parent {    display: table-cell;    height: 100%;    vertical-align: middle;}

[sajisweetgirl 0]

In the first way , if i had a div with auto height , what should I do?

[Ingolme 1,032]

The first method doesn't allow for that. The second method should work, if I've remembered it properly

 

A third method would involve Javascript measuring the element and setting its position accordingly.

[dsonesuk 925]

You need to give the parent (body,html) of .parent 100% height, as the body/html wil be the height of content NOT the viewport.