Jump to content
sajisweetgirl

set the position of a div in center

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...