[Dizi]

This is the most commonly asked question on the forum and as such it makes sense to have a pinned tutorial at the top of all the sections that it has been asked in

Tutorial:
How to center content using CSS

The best way to center a page is to use a wrapper that contains what you want to center, and this can be done in two simple stages.


Stage one- The CSS
Within your css add something that looks like this code:

body {
	text-align:center;
}
#wrapper {
	margin: 0 auto;
	width: xxxx; /* Replace the xxxx with the the width of your site (eg 800px)*/
	text-align:left;
}

A quick explanation of what margin: 0 auto; will do


In the body add text-align:center as this will fix a problem that some browsers have with margin:auto. However this will make all the text in anything be centered so to fix this in the wrapper you will tell all the text to go back to the left, this way you are resetting the default position of the text and will place the text left unless you tell it in a different div/class to be otherwise.

in the wrapper, the 0 is there to tell the top and bottom not to have a margin, this can be changed if you want there to be a top and bottom margin.

The auto tells the left and the right to automatically set a margin. So it takes into account the space that remains and divides it between the left and right margins, making the content centered on the page.



Stage two – The HTML

Now that you have the CSS part done all you need to do is apply the wrapper to the HTML. This is simple, anything that you want to be centered on the page shoul be placed inside the wrapper like this:

<div id="wrapper">
<!-- Place everything you want to be centred here-->
</div>

And that is all that you need to do to center something on a page




EDIT:

For a more in depth look check out this tutorial

To vertically center a site check out this tutorial

[Thomas Thomassen]

Small P.S.: You don't have to add an extra div exclusively to centre something. If you already got an element containing everything that you want centred, just add the margin: 0 auto; to that element.

[Badmotherz]

Or add it to the body element.

[Dizi]

Badmotherz, on Nov 13 2007, 19:36, said:

Or add it to the body element.

This won't work if you want other parts of your site to span across the whole page.

For example you want your header to span the full width of a page and then the rest of your content to be central. As applying a width to the body element will mean that everything on the page will only span that width you have set. So setting your header width to 100% when you have set the body width to maybe 700px the header will only span 100% of the that 700px width and not 100% of the page.


So only use this technique if you want the entire site to be a fixed width

[AVVStudios]

nice tip dizi

[Thomas Thomassen]

Badmotherz, on Nov 13 2007, 20:36, said:

Or add it to the body element.

For backwards compatibility with older IE versions that won't work as auto margin on the body element is ignored. Though, it might be only IE5 or older, not sure about IE6. So it might not be much of an issue any more.

[Dizi]

Thomas Thomassen, on Nov 13 2007, 21:42, said:

For backwards compatibility with older IE versions that won't work as auto margin on the body element is ignored. Though, it might be only IE5 or older, not sure about IE6. So it might not be much of an issue any more.

It works fine in IE6, so just IE5 or older as you have said

[Thomas Thomassen]

Dizi, on Nov 13 2007, 20:54, said:

This won't work if you want other parts of your site to span across the whole page.

For example you want your header to span the full width of a page and then the rest of your content to be central. As applying a width to the body element will mean that everything on the page will only span that width you have set. So setting your header width to 100% when you have set the body width to maybe 700px the header will only span 100% of the that 700px width and not 100% of the page.


So only use this technique if you want the entire site to be a fixed width

Aye. That's what I had to do for my own website. However, I just thought,... the header could be absolutely positioned. Since it goes across the whole screen it starts at 0,0 and full width. The body element could then have a top padding the height of the header.

... as I type this I got a vague recollection of trying this ... I wonder if the absolutely positioned element set to 100% would still be the width of the parent body element. A behaviour I think is wrong as the absolutely positioned element is taken out of the flow and shouldn't be affected by the parent. ... maybe it was just one browser that caused this problem. ... I should really learn to document my findings. This is going to bug me until I try it out again.

[Dizi]

you had be wondering so I had to try it see what happened. I got quit a strange result

firefox - works fine

IE6 The absolute positioning does still position at the very top left, but thinks that that a 100% width should be size the body width was set at (in my case 700px as I like that number today). So now it is neither in the center or spanning 100% of the page

Couldn't test in IE7 though as I don't have it on the PC I am on at the moment.



Is it just me or has my little simple tutorial now got more complex ?

[Thomas Thomassen]

Ah yea, that's probably why I had to drop that method, Our all time favourite browser.
Yea, I think you're right Dizi, I've have gone a bit astray. I hope readers will focus on the initial post and only follow the rest for further interest.

I'll try to restrain myself next time.

[seige]

Although some of you may argue the point, there's still a need to add a

text-align: center;

to the CSS 'body' element for some *very* old browsers, where the 'auto' margins fail.

Before someone says "Who still uses IE5???", trust me, it's better to be compliant.

(Hint: to 'un-centre' the rest of the content after the body container is applying the centering rule, simply apply the 'text-align: left' argument as part of your outermost container div's CSS.)

[Dark Matter]

body {

text-align:center;

}

#wrap {
text-align:left;
margin:0 auto;

}

Sorted

I think centered websites look very yum! i use this all the time and seems to work on all browser Safari, Firefox, Opera and IE 5+

[john efstathiou]

Dark Matter, on Mar 24 2008, 19:42, said:

body {

text-align:center;

}

#wrap {
text-align:left;
margin:0 auto;

}

Sorted

I think centered websites look very yum! i use this all the time and seems to work on all browser Safari, Firefox, Opera and IE 5+

This is valid and the best way.

[Dizi]

john efstathiou, on Mar 29 2008, 13:09, said:

This is valid and the best way.

well not really, as you can't center something that has no width

[Mihai Georgescu]

another thing I found useful at some point was not wrapping everything in one div, instead use a couple of divs ... here's an example to illustrate what I mean:

classical approach:

<div id="wrapper">
<!-- everything else goes here-->
</div>
css provided by Dizi on the first post no need to duplicate

sometimes useful approach:

<div id="top_wrapper">
This is the top wrapper
</div>
				 <div id="different_type_of_div">
					 This is not wrapped
				 </div>
<div id="middle_wrapper">
This is the middle wrapper
</div>
<div id="bottom_wrapper">
This is the bottom wrapper
</div>

and you can easily style the base wrappers with css like:

#top_wrapper,#middle_wrapper,#bottom_wrapper {
	margin: 0 auto;
	width: xxxx; /* Replace the xxxx with the the width of your site (eg 760px) */
}

Here's a visual on that too:
 visual_wrappers.gif (1.97K)
Number of downloads: 94

[Tracy]

Dizi, on Nov 13 2007, 17:25, said:

This is the most commonly asked question on the forum and as such it makes sense to have a pinned tutorial at the top of all the sections that it has been asked in

Tutorial:
How to center content using CSS

The best way to center a page is to use a wrapper that contains what you want to center, and this can be done in two simple stages.
Stage one- The CSS
Within your css add something that looks like this code:

#wrapper {
	margin: 0 auto;
	width: xxxx; /* Replace the xxxx with the the width of your site (eg 800px)*/
}

A quick explanation of what margin: 0 auto; will do

the 0 is there to tell the top and bottom not to have a margin, this can be changed if you want there to be a top and bottom margin.

The auto tells the left and the right to automatically set a margin. So it takes into account the space that remains and divides it between the left and right margins, making the content centered on the page.
Stage two – The HTML

Now that you have the CSS part done all you need to do is apply the wrapper to the HTML. This is simple, anything that you want to be centered on the page shoul be placed inside the wrapper like this:

<div id="wrapper">
<!-- Place everything you want to be centred here-->
</div>

And that is all that you need to do to center something on a page

its exactly the same what I do

[Leftfield]

I always use next code for centering template in the middle. It garanties that will work in all major browsers.

#wrapper {
	width: "xxx"px; /* replace this "xxx" with desired width */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	left: 0px;
	top: 0px;
}

[Dizi]

Why would you place left and top in that bit of code? they are used for positioning absolute items so in that bit of code is totally redundant. Also why use the long winded way of telling left and right to be auto placing as all browsers that will be able to do centering this way would understand margin: 0 auto;


Really I just wanted to point out you bit of pointless redundant coding, as each to there own when it comes to long winded coding of margins

[TFM4th]

I agree with Dizi. the relative position, left, top, and long version with margin-top margin-right margin-bottom margin-left are unneeded. I know of no browser that would require all those extras to center your page

[Leftfield]

TFM4th, on Jul 5 2008, 21:10, said:

I know of no browser that would require all those extras to center your page

Thanks for correcting me. Maybe i dont know too much like you guys. Still got strong opinion that centering should be done like i wrote

offtopic
@Dizi
OMG Are you serious about long coding ???

Best Regards

[Seth]

dizzy I love your new name on the forum! That forum post has gotten crazy. lol. Thanks for posting this tutorial!

-Seth

[webbhost]

Just thought I would add this as I had problems with the above method until I realised this.

Putting the margin: auto; worked.. but only for 1 browser ... either I.E. or firefox (not sure which it was) was still not centering.

This was fixed by making my HTML STRICT using the following line

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Just thought i would add that incase its not been mentioned already and incase anyone was having problems with it.

P.S. I also did margin-left: auto; margin-right: auto instead of just margin: auto;

[Sam Christy]

Nice simple Tutorial!

[x4paul]

Hi, I am new to the build of web pages. I have read and tryed the solution posted here however on my PC at home every thing is centre, when I look at my site from other PC its not. I have 3 site and are all to the left-

I use Adobe Goline 9 any ideas.

[Dizi]

what browser are you using to view them with...and what doctype are your sites set to?

[x4paul]

Dizi, on Oct 24 2008, 21:15, said:

what browser are you using to view them with...and what doctype are your sites set to?

At home I have Ver 7(Explorer) At work have 6 also firefox. The other I have looked from all have diffrent vers. You can view one of the site at www.neuhaus946.de may be if you see the coding it will mean more to you than it does to me at the moment

Thanks

[Dizi]

what a mess of code. I am guessing the reason it looks centered on one computer and not another is due to it being all absolute positioned and the monitor resolution. Are you using Adobe golive and just positioning the site where you want it rather than coding it? As basically what your site is doing is positioning things based on the top left of the browser like this: layer 1 - top: 154px; left: 9px; layer 6 - top: 163px; left: 240px;...so even if you use <center> which you shouldn't do anyway, it will not center as you are giving different things exact locations to be on the page.

The best way to solve this would be through coding so how good is your knowledge, if I just gave you the code would you know how to place it in the site, or will I have to give an in depth explanation of exactly how to do it?

[x4paul]

Dizi, on Oct 25 2008, 15:18, said:

what a mess of code. I am guessing the reason it looks centered on one computer and not another is due to it being all absolute positioned and the monitor resolution. Are you using Adobe golive and just positioning the site where you want it rather than coding it? As basically what your site is doing is positioning things based on the top left of the browser like this: layer 1 - top: 154px; left: 9px; layer 6 - top: 163px; left: 240px;...so even if you use <center> which you shouldn't do anyway, it will not center as you are giving different things exact locations to be on the page.

The best way to solve this would be through coding so how good is your knowledge, if I just gave you the code would you know how to place it in the site, or will I have to give an in depth explanation of exactly how to do it?

Well as I am new to the designing and am as thick as f.... when it comes to coding could you please do an in depth explanation of exactly how to do it.

I am using golive and just positioning the the item were I want it.

[Dizi]

x4paul, on Oct 25 2008, 19:44, said:

Well as I am new to the designing and am as thick as f.... when it comes to coding could you please do an in depth explanation of exactly how to do it.

I am using golive and just positioning the the item were I want it.

First step if you like web design do it correctly and learn how to code. After all websites are made up of code, without the code a website wouldn't work, so it only makes sense that if you are interests in web design that you should learn how to create a site. http://www.htmldog.com/ that will help you with that aspect...I mean if this is something that intrests you why deprive yourself of learning how to make a site, instead of using a program to make a site badly and not know why bits break when they do



Anyway, this is the way to center your site the best way I can think of.


Right in your code see where you have this line:

#layer1 { position: absolute; top: 3px; left: 32px; width: 79px; height: 75px; }

directly above this line add this bit of code:

body {text-align:center}
#wrapper { position:relative; margin: 0 auto; text-align:left; width:1000px;}

so it will now look like this:

body {text-align:center}
#wrapper { position:relative; margin: 0 auto; width:1000px;}
#layer1 { position: absolute; top: 3px; left: 32px; width: 79px; height: 75px; }

Notice that the width is set to 1000px, this will more than likely need too be changed to a different width as I do not know how wide your site is...so you will have to play a bit of trial and error with this unless you know the exact width of it. All you need to do is change the 1000 to something smaller like 600, just make sure that you keep the px after it


Now further down you have this:

<center>

replace that with this:

<div id="wrapper">

What this is doing is telling the code to use the style that you have just created above


then right near the bottom you have this:

</center>

replace that with this:

</div>

and this bit is telling it to stop using the style, as you want everything to be in the center it needs be just before the </body> part.



Now this should center it as all it is doing is telling your absolute positioned bits (all the rest of your site) to just position itself within the wrapper and follow the wrapper where ever it goes, as it is set to be centered then it should center everything

[x4paul]

Dizi
Have done as you have said but to me it looks the same. I am going to try and work with dreamweaver and try to do it in code. So keep your fingure and toes crossed. Never done it this way.

[x4paul]

Ok I give in I am pulling my hair out (dont have a lot left) can some one advice me on a home study course.

[MysticMonkey]

Hi All,

To Dizi,
i just made my homepage on illustrator and transfered it to HTML; my problem is that my original document on illustrator had dimensions 800x600 ; when i load the page, it does not fit the screen giving me a large chunk of white area on the width; please how can i solve this problem or what do you recommend.

if it heps this is my html code:

sorry for so much text guys..really sorry

<html>
<head>
<title>Web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Untitled-1.ai) -->
<table id="Table_01" width="801" height="601" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td colspan="8">
			<img src="images/IncognitoConcepts_01.gif" width="800" height="36" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="36" alt=""></td>
	</tr>
	<tr>
		<td rowspan="12">
			<img src="images/IncognitoConcepts_02.gif" width="31" height="564" alt=""></td>
		<td colspan="6" align="left" valign="top">
			<img src="images/IncognitoConcepts_03.jpg" width="738" height="172" alt=""></td>
		<td rowspan="12">
			<img src="images/IncognitoConcepts_04.gif" width="31" height="564" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="172" alt=""></td>
	</tr>
	<tr>
		<td colspan="6">
			<img src="images/IncognitoConcepts_05.gif" width="738" height="14" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="14" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="5" align="left" valign="top">
			<img src="images/IncognitoConcepts_06.jpg" width="345" height="250" alt=""></td>
		<td colspan="4">
			<img src="images/IncognitoConcepts_07.gif" width="393" height="21" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="21" alt=""></td>
	</tr>
	<tr>
		<td colspan="3" rowspan="5">
			<img src="images/IncognitoConcepts_08.gif" width="218" height="259" alt=""></td>
		<td align="left" valign="top">
			<img src="images/IncognitoConcepts_09.gif" width="175" height="73" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="73" alt=""></td>
	</tr>
	<tr>
		<td align="left" valign="top">
			<img src="images/IncognitoConcepts_10.gif" width="175" height="73" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="73" alt=""></td>
	</tr>
	<tr>
		<td align="left" valign="top">
			<img src="images/IncognitoConcepts_11.gif" width="175" height="73" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="73" alt=""></td>
	</tr>
	<tr>
		<td rowspan="2">
			<img src="images/IncognitoConcepts_12.gif" width="175" height="40" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="10" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/IncognitoConcepts_13.gif" width="345" height="31" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="30" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/IncognitoConcepts_14.gif" width="37" height="1" alt=""></td>
		<td colspan="2" rowspan="2" align="left" valign="top">
			<img src="images/IncognitoConcepts_15.gif" width="356" height="36" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td rowspan="3">
			<img src="images/IncognitoConcepts_16.gif" width="11" height="97" alt=""></td>
		<td colspan="2" rowspan="2" align="left" valign="top">
			<img src="images/IncognitoConcepts_17.gif" width="356" height="36" alt=""></td>
		<td rowspan="3">
			<img src="images/IncognitoConcepts_18.gif" width="15" height="97" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="35" alt=""></td>
	</tr>
	<tr>
		<td colspan="2" rowspan="2">
			<img src="images/IncognitoConcepts_19.gif" width="356" height="62" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="1" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">
			<img src="images/IncognitoConcepts_20.gif" width="356" height="61" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="1" height="61" alt=""></td>
	</tr>
	<tr>
		<td>
			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="11" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="334" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="22" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="15" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="181" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="175" height="1" alt=""></td>
		<td>
			<img src="images/spacer.gif" width="31" height="1" alt=""></td>
		<td></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Thank you

[Dizi]

In all honesty your code scares me. Do you just cut up the image in imageready and let that make the site for you by going save for web?

My advice would be if you are interested in web design to learn how to code, as what image ready or any other site that makes the code for you does is make a mess and often a lot of mistakes...so it you are interested in web design have a look at this site as it will help you a lot : http://www.htmldog.com/ It may seem like a lot of hard work, and at the beginning it is but it will save you a lot of time in the future as you will know what is going on with your web site, rather than relying on other things to make a website.


Right now with the site, I have created a page using your code, however to me it looks fine...but as I don't have the images that might be why. Are you trying to center the page or edit it in some way when it breaks or is it just when you look at it in a browser...if so which browser?

[dg2008]

Dizi, on Nov 13 2007, 17:25, said:

<div id="wrapper">
<!-- Place everything you want to be centred here-->
</div>

So I'd add the top part to my header.php and the bottom to my footer.php?

[Dizi]

dg2008, on Oct 31 2008, 09:02, said:

So I'd add the top part to my header.php and the bottom to my footer.php?

You could do that if you want to

[MysticMonkey]

thanks Dizi,

what i found out was that adobe illustrator got my images in tables and inputing text will make it a mess, i do know a bit of html and will definately do some reading up, what i intend to do is use illustrator to cut up my web layout, optimize and use <div> tags to seperate the images and fit in text; i think this will work.
thanks and maybe when i am done i can post you the link to the website. thanks again

MysticMonkey

[Harish]

Vertically center content with CSS
A convenient benefit of using tables is the ability to vertically center content within a cell using the valign attribute. Unfortunately, acheiving the same effect with CSS isn’t so convenient. So, as we continue to move towards tableless structures, there comes a need for a simple and valid CSS alternative. There have been a number of ways to approach this feat, but in this tutorial, I will lay out the technique we use to vertically center content using CSS.

The HTML

Three divs are required in order to pull this one off. Here’s an example of how we setup the divs.

    <div id="container">
    <div id=”position”>
    <div id=”content”>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Donec laoreet egestas mi. Aliquam erat volutpat. Aliquam erat volutpat.
 Suspendisse potenti. Suspendisse potenti. Vestibulum mi nibh, 
hendrerit nec, feugiat vitae, feugiat a, nisl.
    </div>
    </div>
    </div>

The #container div is used as the main reference point for centering the content. In other words, the content will be vertically centered against the height of the #container div.

The #position div is used to, naturally, position the content.

Finally, the #content div is used to encase the actual content that we are trying to center. This div is also used to correct the positioning of the content for Internet Explorer users (as you’ll see later).
The CSS

Here’s the CSS we apply to make it all come together:

    <STYLE type="text/css">
    #container { width: 100%; height: 100%; display: table; }
    #position { display: table-cell; vertical-align: middle; width: 100%; text-align: center; }
    </STYLE>

We’ve defined the height of #container to be the full height (100%) of the page. We could have just as easily given it a fixed height such as 500px. We’ve also added display: table and display: table-cell to #container and #position, respectively, which will tell it to mimic the properties of <table> and <td>.

You’ll notice that we haven’t applied any style to the #content div. This is because browsers like Firefox and Safari are able to use the uber handy vertical-align: middle property, making it almost just as easy as using tables. Using only the code we’ve shown thus far, our content should be nicely vertically centered on the page in all browsers except Internet Explorer, which doesn’t understand vertical-align: middle.

To correct this problem and ensure that our content is still vertically centered for IE users, we’ll apply the following conditional statements and extra bits of CSS.

    <!--[if IE]>
    <STYLE type="text/css">
    #container { position: relative; }
    #position { position: absolute; top: 50%; }
    #content { position: relative; top: -50%; }
    </STYLE>
    <![endif]–>

The <!--[if IE]> … <![endif]–> tags tell the browser to only process this CSS if the browser being used is Internet Explorer.

When processed, the CSS places the top margin of the #position div halfway down the height of #container. However, this only places the content in the lower half of #container. So, to center it vertically, #content’s top is offset by -50%. That is, it is being shifted upwards a distance that is equal to 50% of its height. If you do the math and crunch the numbers in your head, you’ll find that this does a nice job of centering the content.
L

[weldan]

Thanks a bundle.

[chris@website]

Hi All

I'm new hear so haven't had much time to look around so forgive me if this is elsewhere but I use the following to centre with some success.

<style type="text/css">
<!--
#page {
	position:absolute;
	left:50%;
	top:20px;
	width:400px;
	height:100px;
	margin-left: -200px;
}
-->
</style>
<div id="page"></div>

You can of course use any width height and margin combination.

[jojojc]

I like what I am reading... lots of ideas coming in.

As a newbie I have to test it one by one. I understand the codes but I don't know how it really shows
Thanks a lot!