Two methods for vertical centering in CSS

Vertical centering has always been a fairly elusive goal when dong CSS layouts, but it’s actually easier to achieve than you might think. Here are the two simplest methods that I know of to achieve this goal – one uses two old, yet underused, values for the display property and the other uses the new Flexible Box Layout (or ‘Flexbox’) that is available in CSS3.

For both methods I will take this HTML:

and centre align the inner div vertically and horizontally. Horizontal alignment is easy of course, so the real point of this is to get the div centre aligned on the vertical axis.

1. display: table;

The first method uses display: table and display: table-cell to achieve the vertical alignment goal. These values have been around for ages and will work in any browser. Some people may balk at using the display property like this because of the current popular aversion to tables, but I assure you it is a semantically correct and legitimate use of the property. The CSS for it, when applied to the above HTML, is quite simple and looks like this:

The table & table-cell properties cause the browser to treat the elements as if they were part of a table, causing the vertical-align property to become applicable.

2. display: box;

The second method uses the flexbox model that is outlined in the latest CSS3 spec. It is still under review and subject to change, but it currently works in the latest versions of all browsers except Opera (yes, it even works in IE9). It does use browser-specific properties unfortunately, but in time they will be able to fall away. The CSS for it is as follows:

In this example, the box-pack property aligns the element horizontally, while the box-align property is what sets the vertical alignment.

As you can see, with this way of doing things only the parent element needs to have any CSS applied to it – I would argue that this is more semantically correct as you can then apply the actual content styles without worrying about any of the positioning for the element. Also, without the browser-specific properties, this method is far shorter and more simple to apply.

Conclusion

While the flexbox method maybe be shorter, easier and more semantically correct, it will be a while before it is widely accepted. The browser-specific properties help and will make sure you can use this method relatively safely, but, as with so many of the new properties in CSS, it is generally safer to stick with the older way of doing things for now. That’s where the first method comes in – it works in all browsers and is entirely reliable. It may be slightly longer, but it is still very easy to implement and won’t cause any issues.

This site is hosted by SiteGround - running on their incredibly fast and super secure platform that is uniquely tailored for WordPress hosting. Moving my site to SiteGround was the best decision I ever made for it - you should do the same. Today.

12 thoughts on “Two methods for vertical centering in CSS”

      1. Yeah.  It may also be handy to mention that using the clear: tag on the parent element can sometimes help if you have lots of other junk on the page – but I suspect I won’t need it now that I’m not using tables to do all of the above :P

  1. my god… the use of table display properties is awesome.

    I’ve seen people complaining about the use of display: table; but I bet that if it were named anything else people would stop complaining and use it without issue.

    Looking forward to flexbox adopting full browser support!

  2. Hi!!!
    Very clarifying. But (ther’s always somekind of “but”)…could someone help me on understanding what kind of document declaration should I use in order to get this code working?.

    I’m trying, unsuscessfully, to get it working in a sandbox site.

    I can’t figure out how to make the CSS display:table property work with ny valid XHTML DOCTYPE declaration.

    It only works if I delete the DOCTYPE.

    Am i doing something wrong?

    Just grabbed your code!.

    Thanks!!!!

    1. As far as I know, the doctype declaration should not affect the display:table property at all. It is a relatively old CSS property that should work in almost any browser. That being said, I would never recommend deleting the doctype as that can cause unexpected problems, and I would always recommend using just ‘html’ as the doctype – no exceptions.

  3. Fantastic – for various reasons in what I was trying to achieve, none of my usual ways of vertically centering were going to work. Your second method worked perfectly! thanks for the fix.

  4. Hey Hugh Lashbrooke :)

    The second “new” method in CSS3 that I learn from your tutorial today, save my day! Thanks man..
    Your explanation was very clear.

    Again, Thank you so much!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>