WebRef.eu  - Internet Marketing and Online Business Resources  

Home / Site Map | Contact

 

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



 




Low Prices UK Shopping

Compare Prices
at LowPrices.co.uk


Home / Site Map | Contact

All Content ©2020 WebRef.eu