How To Centre a div On a Page

To centre a div on a page, you apply the following CSS to it:

{
margin: 0 auto;
}

Note, the above is a CSS shorthand, where the 0 sets the top and bottom margin, 0 in this case, and the auto sets the left and right margin. The auto tells the browser to automatically set the left and right margin, splitting the space evenly and thus centering the div in the browser window.

We could equally have written:

{
margin: 0 auto 0 auto;
}

See Example 1 for a worked example. The full page code is:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Example 1 - How to Centre a div On a Page</title>

<style>

#container
{
margin: 0 auto;
width: 400px;
background-color: #33CC33;
}

</style>

</head>

<body>

<div id="container">
<p>This is an example of how to centre a div on the page.</p>
</div>

</body>

</html>

Back to CSS How To Guides

Visit LowPrices.co.uk for Your UK Shopping

Compare Prices
at LowPrices.co.uk

Home / Site Map | Contact