Content goes here

#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}

The Goods

• The content can dynamically change height (doesn’t have to be defined in CSS)
• Content doesn’t get cut off when there isn’t enough room in the wrapper

The Bads

• Doesn’t work in Internet Explorer (not even the IE 8 beta)
• Lots of nested tags (not really that bad, this is a subjective topic)

Method 2

This method will use an absolutely positioned div, which has the topset to 50% and the top margin set to negative half the height of thecontent. This means the object must have a fixed height, that is definedby CSS.

Because it has a fixed height, you may want to set overflow:auto;to the content div, so if there is too much content to fit in, ascrollbar will appear, instead of the content continuing on outside thediv!

<div id="content">Content Here</div>

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}

The Goods

• Works in all browsers
• Doesn’t require nested tags

The Bads

• When there isn’t enough space, the content disappears (such as when the div is inside the body and the user shrinks the browser window, a scrollbar will not appear)

Method 3

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

Content here

#floater{float:left; height:50%; margin-bottom:-120px;}#content{clear:both; height:240px; position:relative;}

The Goods

• Works in all browsers
• When there isn’t enough space (ie. the window shrinks) our content will not be cut off, and a scrollbar will appear.

The Bads

• Only one I can think of is that it requires an extra empty element (which isn’t that bad, another subjective topic)

Method 4

This method uses a position:absolute; div with a fixed width and height. The div is then told to stretch to top:0; bottom:0;. It can’t because of the fixed height, so margin:auto; will make it sit in the middle. This is similar to using the very common margin:0 auto; to horizontally centre block elements.

Content here

#content {position:absolute; top:0; bottom:0; left:0; right:0;margin:auto; height:240px; width:70%;}

The Goods

• Easy

The Bads

• Doesn’t work in Internet Explorer (does work in IE8 Beta)
• Content is cut off without scrollbar if there isn’t enough room in the container

Method 5

This method will only centre a single line of text. Simply set the line-height to the height of the object, and the text sits in the middle

Content here

#content {height:100px; line-height:100px;}

The Goods

• Works in all browsers
• Doesn’t get cut off when the isn’t enough space

The Bads

• Only works on text (no block elements)
• When there is more than a single line (like when it wraps), it breaks badly

This method is very useful on small elements, such as to centre the text inside a button or single-line text field.

Which Method?

My favourite method is number 3 — using a floater and clearing thecontent. It doesn’t have any major downsides. Because the content will clear:both;, you can also put other elements above it, and when the windows collapses, the centered content will not cover them up. See the demo.

Title
Content Here

#floater{float:left; height:50%; margin-bottom:-120px;}#top{float:right; width:100%; text-align:center;}#content{clear:both; height:240px; position:relative;}

Now you know how it works, let’s start creating a simple butinteresting website! The final product will look something like this:

Step 1

It’s always good to start with semantic markup. This is how our page will be structured:

• #floater (to push the content into the middle)
• #centred (the centre box)
  • #side
    • #logo
    • #nav (unordered list
      )
    • #content
  • #bottom (for copyright, etc.)

  Here is the xhtml code I will be using:

   
   
  A Company
  Home
  Products
  Blog
  Contact
  About
   
   
  Page Title
   
  Holisticly re-engineer value-added outsourcing after process-centric collaboration and idea-sharing.Energistically simplify impactful niche markets via enabled imperatives.Holisticly predominate premium innovation after compelling scenarios.Seamlessly recaptiualize high standards in human capital with leading-edge manufactured products.Distinctively syndicate standards compliant schemas before robust vortals.Uniquely recaptiualize leveraged web-readiness vis-a-vis out-of-the-box information.
   
  Heading 2
   
  Efficiently embrace customized web-readiness rather than customer directed processes.Assertively grow cross-platform imperatives vis-a-vis proactive technologies.Conveniently empower multidisciplinary meta-services without enterprise-wide interfaces.Conveniently streamline competitive strategic theme areas with focused e-markets.Phosfluorescently syndicate world-class communities vis-a-vis value-added markets.Appropriately reinvent holistic services before robust e-services.
   
   
   
  Copyright notice goes here

  Step 2

  Now we will start with some basic CSS to lay out the page. You should put this in styles.css, which is linked to at the top of our html.

  html, body {margin:0; padding:0;height:100%;} body {background:url('page_bg.jpg') 50% 50% no-repeat #FC3;font-family:Georgia, Times, serifs;} #floater {position:relative; float:left;height:50%;margin-bottom:-200px;width:1px;} #centered {position:relative; clear:left;height:400px; width:80%; max-width:800px; min-width:400px;margin:0 auto;background:#fff;border:4px solid #666;} #bottom {position:absolute;bottom:0; right:0;} #nav {position:absolute; left:0; top:0; bottom:0; right:70%;padding:20px; margin:10px;} #content {position:absolute; left:30%; right:0; top:0; bottom:0;overflow:auto; height:340px;padding:20px; margin:10px;}

  Before we can make our content vertically centred, the body and htmlmust be stretched to 100% height. Because the height is inside thepadding and margin, we have to make them 0 so a scrollbar doesn’t appearjust to show you a little margin.

  The floater’s margin-bottom is half of the content’s height (400px), which is -200px.

  You should now have something that looks like this:

  

  The width of #centered is 80%. This is to make your sitesmall on small screens and wide on bigger screens (on my medium-largescreen, many old websites are small in the top left corner, and it is alittle annoying). This is known as having a liquid layout. min-width and max-widthare also set to stop it getting too big or too small. Internet Explorerdoen’t support min & max widtgh though. Obviously, you may chooseto have a fixed width instead.

  Because #centered is position:relative, we can use use absolute positioning inside it to position the elements. overflow:auto; was used on #content,so a scrollbar will appear when the content doesn’t fit inside it.Internet Explorer doesn’t like overflow:auto; unless we tell it theheight (not just top and bottom position, and not in %) so we did that as well.

  Step 3

  The last thing to do is add some more styles to make it look a bit nicer. Lets start with the menu.

  #nav ul {list-style:none;padding:0; margin:20px 0 0 0; text-indent:0;} #nav li {padding:0; margin:3px;} #nav li a {display:block; background-color:#e8e8e8;padding:7px; margin:0;text-decoration:none; color:#000;border-bottom:1px solid #bbb;text-align:right;} #nav li a::after {content:'?'; color:#aaa; font-weight:bold;display:inline; float:right;margin:0 2px 0 5px;} #nav li a:hover, #nav li a:focus {background:#f8f8f8;border-bottom-color:#777;} #nav li a:hover::after {margin:0 0 0 7px; color:#f93;} #nav li a:active {padding:8px 7px 6px 7px;}

  The first thing to do when turning a list into a menu kind of thing is to remove the dot points with list-style:noneand all the margin and padding. If you want it to have a margin orpadding, make sure you specify exactly what, don’t leave it to the webbrowsers defaults because they can vary.

  The next thing to notice is that the links are set to display as ablock element. This makes them fill the entire line and gives you morecontrol over them. If you want to make your menu go horizontally(doesn’t work in this design), then you can make them float as well.

  The other interesting thing to notice about the menu is the :before and :afterCSS pseudo-element let you insert content before and after elements.This is a good way to include little icons or characters such as thearrow at the end of each link. This doesn’t work in Internet Explorerbefore version 8 though.

  

  Step 4

  The last thing to do is add some more CSS to make the page look a bit nicer.

  #centered {-webkit-border-radius:8px; -moz-border-radius:8px; border-radius:8px;} h1, h2, h3, h4, h5, h6 {font-family:Helvetica, Arial, sans-serif;font-weight:normal; color:#666;} h1 {color:#f93; border-bottom:1px solid #ddd;letter-spacing:-0.05em; font-weight:bold;margin-top:0; padding-top:0;}  #bottom {padding:10px;font-size:0.7em;color:#f03;}  #logo {font-size:2em; text-align:center;color:#999;} #logo strong {font-weight:normal;} #logo span {display:block;font-size:4em; line-height:0.7em;color:#666;} p, h2, h3 {line-height:1.6em;} a {color:#f03;}

  A thing to notice is the rounded corners on #centered. In CSS3, there should be a border-radius property to set the radius of rounded corners. This is not implemented by any major browsers yet, unless you use the -moz or -webkit prefixes (for Mozilla Firefox and Safari/Webkit)

  

  Compatibility Notes

  As you might have guessed, Internet Explorer is the only main browser which gives you trouble:

  • The #floater must have a width defined, or it doesn’t do anything in any version of IE
  • IE 6 has too much space around our menu, which breaks it
  • IE 8 has extra space above the

  More Ideas

  There are many interesting things you can do with centered websites. I used this idea in my redesign of the SWFObject Generator 2.0 (to generate code to use SWFObject 2.0). Here is also another idea.

  Sources

  I did not discover all this myself. Here are some of the articles Ihave read which describe some of these techniques: (If you areinterested, I recommend you read them)

  • Understanding vertical-align, or "How (Not) To Vertically Center Content"
  • Vertical centering using CSS
  • Vertical Centering in CSS