March 17, 2011

Centering Page Content with CSS

2 comments

Great post from Roger Johansson on how to center page content both horizontally and vertically — a much wished for trick. The method works for all modern browsers and IE8 and up (sorry IE6 and 7), since it relies on display: table.

The basic idea is to set both the html and body elements to 100% height; add display: table to the html element; add display: table-cell and vertical-align:middle to the body element; add a wrapper div (this is the thing that will be centered), give it a width and margin: 0 auto.

It seems to work a treat. Read the complete description of this technique at his blog.

  1. March 27, 2011 at 8:39 am
    Melinda Quinn says:

    Thank you so much for your book “DW5: the Missing Manual”. You are helping me to “fill in the gaps” of my understanding CSS. One in particular – online article: “Flexibile heitht vertical centering with CSS, beyond IE7″.
    …and a line or so in your book (DWCS5)about the wonderful things does for us beginners.

    • March 27, 2011 at 8:48 am
      Melinda Quinn says:

      see previous comment — I left out my “thank you” for your discussions about the wonderful use of DIV tag.