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:

<div id="outer">
    <div id="inner">Element to be aligned</div>
</div>

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:

#outer {
    display: table;
    width: 100%;
    height: 100%; /* Height can be anything */
}
#inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

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:

#outer {
    width: 100%; /* Firefox needs this */
        
    height: 100%; /* Height can be anything */
        
    /* WebKit (Chrome & Safari) */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    
    /* IE */
    display: -ms-box;
    -ms-box-pack: center;
    -ms-box-align: center;
    
     /* Native CSS */
    display: box;
    box-pack: center;
    box-align: center;
}

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.

Tags: , , , ,

10 Responses to “Two methods for vertical centering in CSS”

  1. Chase Richards May 24, 2012 at 2:42 pm #

    Dude, I struggle with this on a DAILY basis.  Thanks so much!

    • Hugh Lashbrooke May 24, 2012 at 2:51 pm #

      Glad I could help – I’ve used the first method for ages, but only discovered the second one recently. Pretty handy stuff to know really.

      • Chase Richards May 24, 2012 at 3:36 pm #

        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

  2. Larry Botha October 31, 2012 at 10:08 am #

    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!

  3. Hans Kuijpers January 11, 2013 at 2:58 pm #

    two clean methods. Thank you very much. Sure is helpful.

  4. Pepe Fernández February 11, 2013 at 7:27 pm #

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

    • Hugh Lashbrooke February 12, 2013 at 9:13 pm #

      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.

  5. jeff szuc May 29, 2013 at 8:48 pm #

    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.

  6. Max October 3, 2013 at 6:23 pm #

    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!

Trackbacks/Pingbacks

  1. CSS dikey ortalama için iki yöntem | fulya gürsel - July 6, 2013

    [...] Kaynak : http://www.hughlashbrooke.com/two-methods-for-vertical-centering-in-css/ [...]

Leave a Reply

css.php
Post
Comments