Smartlab Software logo

Center a Webpage using CSS

This method works on all the new browsers and most old browsers.


<title>Centering a page layout with CSS</title>
<style type="text/css">
body {
text-align: center;
min-width: 980px;

#wrapper {
width: 960px;
margin: 0 auto;
text-align: left;


<div id="wrapper">
<h1>The Gettysburg Address</h1>

<h2>Gettysburg, Pennsylvania<br>November 19, 1863</h2>
Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty,
 and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war,
 testing whether that nation, or any nation so conceived and so dedicated, can long endure.



The wrapper sets the width of the webpage to 960px, centers everything but left-justifies the text. The margin:0 auto centers everything.
Note that body tag in CSS must come before #wrapper.
Some browsers break when browser width is less than wrapper width; hence the min-width in body.
I did not use a DOCTYPE (for code simplification) but highly recommend using one.