Summary

This article shows you how to center align your web page using HTML and CSS. There are many ways to center your HTML pages, but we’re going to show you one example that works perfectly in Internet Explorer, Firefox, Safari and Google Chrome.

The CSS

Copy & paste the code inbetween your page’s <head> tags. If you’re using an external style sheet, delete the <style> tags as these are not required.

<style type="text/css">
/* Centering Content */
body {
	text-align:center;
}
#wrapper {
	margin: 0 auto;
	width: 	960px; /* Replace 960px with your page width*/
 	text-align:left;
}
</style>

The markup

You now need to wrap your code within a new <div> with an id “wrapper”. Your browser will apply the matching style to the <div> and center everything between the opening and closing <div>.

<div id="wrapper">
<!-- Replace this line with anything you require centering -->
</div>

Full working example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Centering using CSS</title>
<style type="text/css">
/* Centering Content */
body {
	text-align:center;
}
#wrapper {
	margin: 0 auto;
	width: 	960px; /* Replace 960px with your page width*/
 	text-align:left;
}
</style>
</head>
<body>
<div id="wrapper">
<!-- Replace below code -->
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Laboris nisi ut aliquip</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- Replace above code -->
</div>
</body>
</html>