Home/ Questions/Q 123965
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T04:22:14+00:00

How could I vertically center a <div> within a <div> ? My code so

  • 0

How could I vertically center a <div> within a <div>?

My code so far:

<div style="height:322px;overflow:auto;">     <div style="border: Solid 1px #999999;padding:5px;">     </div> </div>

i have tried "top:50%;" and "vertical-align:middle;" without success

For argument sake, how would I do it with a table then? I’ve used css for everything else so far so it’s not like I’m not trying to employ "good practices".

The inner div does not have a fixed height

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. In short, you’re stuffed. More on this in a recent question I asked Can you do this HTML layout without using tables? Basically the CSS fanatics need to get a grip and realize there’s simply some things you can’t do (or can’t do well) without tables.

    This anti-table hysteria is nothing short of ridiculous.

    Table cells handle vertical centering really well and are backwards compatible as far as you could possibly care about. They also handle side-by-side content way better than floats, relative/absolute positioning or any of the other CSS type methods.

    Joel coined (or at least popularized) the term ‘architect astronauts’ in Don’t Let Architecture Astronauts Scare You. Well, in that same vein I think the term ‘CSS Astronaut’ (or ‘CSS Space Cadet’) is equally appropriate.

    CSS is an incredibly useful tool but it also has some pretty serious limitations. My favourite ishow numbered lists may only appear as ‘3.’ but not ‘3)’ or ‘(3)’ (at least prior to CSS3 generated content–or is it CSS2.1? Either way it’s not widely supported). What an oversight.

    But bigger than that is vertical centering and side-by-side layout. These two areas are still a huge problem for pure CSS. Another poster decided the relative positioning combined with negative margin heights was the way to go. How is that any better than:

    <html> <head>   <title>Layout</title>   <style type='text/css'>     #outer { height: 200px; border: 1px solid black; width: 600px; background-color: #DDD; }     #inner { width: 150px;  border: 1px solid red; background: yellow; margin: auto; line-height: 100%;  }   </style> </head> <body> <table> <tr> <td id='outer'>   <div id='inner'>Inner</div> </td> </tr> </table> </body> </html>

    which will work everywhere, everytime.

    Here is an article on vertical centering in CSS. To achieve a similar thing they use three nested divs with relative+absolute+relative positioning just to get vertical centering. I’m sorry but whoever wrote that–and anyone who thinks that’s a good diea–has simply lost the plot.

    A counterargument is given in Tables vs CSS: CSS Trolls begone. The proof really is in the pudding. The vast majority of the top 20 (Alexa) sites still use tables for layout. With good reason.

    So decide for yourself: do you want your site to work and spend less time getting it to work? Or do you want to be a CSS Astronaut?

    • 0