Horizontally Center A Site
This is probably the most asked question when it comes to CSS, so it makes sense for it to be the first tutorial in this section.
The simplest way to center a site is to add a container that will wrap around the whole of the sites content, commonly referred to as a wrapper. This tutorial will quickly explain how to create one.
Step One – The CSS
Start by adding this code:
#wrapper {
margin: 0 auto;
width: 800px; /* Replace the 800px with the the width of your site*/
}
The auto value in the margin means that it will automatically take the remaining space within the browser window and distribute it evenly between the left and right. This is why it is essential to have a set width, as without knowing the container width it won’t know how much space is left over. The 0 represents the top and bottom margin, this is set to nothing in this example but can be given a value if you wish to change the top and bottom margin as well.
However there is a slight problem with this method as some older browsers ignore margin: 0 auto. So a small fix needs to be added into the CSS so that the site will center on as many browsers as possible.
body {
text-align:center;
}
#wrapper {
margin: 0 auto;
width: 800px; /* Replace the 800px with the the width of your site*/
text-align:left;
}
Adding text centering to the body will force some older browsers to move the div to the center, but this will cause all the text to become centered as well, so to counter this simply tell the text to align back to the left within the wrapper (that is if you want your default text align to be to the left).
Step Two – The HTML
With the CSS part done all that is left to do is apply the wrapper within the HTML document :
<div id="wrapper">
<!-- Place everything you want to be centred here-->
</div>
That is all that is needed within the HTML.
A quick note about position:absolute
If the site you are coding relies on absolute positioned elements to position your content this method will not work. This is because position:absolute relies on positioning elements based on the top left corner of the browser window (also known as the ’0 0 position’), you could try changing your #wrapper css to this, however there is no guarantee that it will help.
#wrapper {
margin: 0 auto;
width: 800px; /* Replace the 800px with the the width of your site*/
text-align: left;
position: relative;
}
The idea behind this is that the top left of the wrapper will now act as the ’0 0 position’ for the absolute positioned elements instead of the top left of the browser window, making it so the layout will follow the wrapper position rather than the browser windows position. This can cause other issues with an absolute positioned layout, so use with caution and make sure your site works in as many browsers as possible.
twitter
forrst
google+
Rss
4
Comments
liked your tip on text alignment :tup:
thank you
its really great idea.
If I have div boxes throughout my website, how do I position them so they all stay in the correct place while also being centered?
Hi Sam, it really depends on how you code your website, if you make sure that all of your divs are contained in one main div then that should ensure that they are in the correct place and centred. If you are positioning all your divs with absolute positioning then you need to make sure that the main div container is set to position:relative as this will mean that all your absolute positioned divs are relative to that container instead of the browser window.