Quickest, easiest, tiniest way to center a web layout using CSS

Add this to your CSS file:

body {
	width: 960px;
	margin: 0 auto;
}

That’s it. No container DIVs, no center alignment hacks, no extra calculation. Change the width value to 770px or whatever your layout width is.

Tested in…

  • Google Chrome 12.0 (Windows 7)
  • Firefox 4.0.1 (Windows 7)
  • Safari 5.0.3 (Windows 7)
  • Internet Explorer 9.0 (Windows 7)*
  • Opera 11.50 (Windows 7)

.. and working. Don’t be tricked by my blog’s foolish theme’s use of “X” as list-style-image. It should be .

* Internet Explorer 9 requires the <!DOCTYPE html> declaration at the top for this to work. All the other browsers work without it just fine. However, I think it’s good practice to include the definition from now on.

Because it’s so efficient, it probably won’t work in older browsers, so don’t rely on this if you’re making a website that will be used by grandma.

Advertisement

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close