Jump to content

Centering a div vertically


markvs

Recommended Posts

I would like to center a div vertically within a containing div without having to manually figure the height of the containing div, and then applying the appropriate top margin to the inner div.

 

I know you can't use margin: auto 0;.

 

So, what are my options? Can I do this with javascript?

Link to comment
Share on other sites

Hi there :)

 

I've found a couple of possible examples. I'm only marginally interested because I was playing around clearing floats the other day, and the second example looks interesting when wondering if one can merge both ideas. Anyway, about those examples...

 

Vertically and Horizontally Centered Div

 

Cross-browser Vertical & Horizontal Centering

Link to comment
Share on other sites

You can't make the inner div center vertically unless you give the container div a height to work within unless you use display: table and display: table-cell (unless javascript can do it).

 

See item 17f here

http://www.wickham43.net/firefoxbackground.php

where neither the container #displaytable, nor the middle div #displaytablecell2 nor the green div #nested have a height.

Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...