Jump to content

set the position of a div in center


sajisweetgirl
 Share

Recommended Posts

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;}
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...