CSS Forum

**LadynRed** · 11:48 AM

With CSS solutions of course. This question comes up constantly, so here are links to several resources specific to this issue:

HORIZONTAL CENTERING
http://www.maxdesign.com.au/presentation/center/
http://bluerobot.com/web/css/center1.html
http://www.simplebits.com/notebook/2...centering.html
http://www.andybudd.com/archives/200...ntering_a_div/
http://css-discuss.incutio.com/?page...ngBlockElement
http://allmyfaqs.net/faq.pl?Center_with_CSS
If you have new resources, PM me and I'll add them, this thread is now locked
VERTICAL CENTERING
http://www.hicksdesign.co.uk/journal...ering-with-css
http://www.jakpsatweb.cz/css/css-ver...-solution.html
http://tutorials.alsacreations.com/centrer/

**dougadam** · 02-29-2008, 08:36 AM

I have often been in need of this information.
Thanks

**audiomad** · 02-29-2008, 09:04 AM

or simply use this

}
#container {
margin:0 auto;
width:860px;
bottom:0;
}

**LadynRed** · 02-29-2008, 02:32 PM

It's not ALWAYS that simple.. and as you can see if you read the articles, there are many different solutions.

**pothi** · 03-26-2008, 09:32 AM

Hi,

I'm new to webdesign. I've done horizontal centering for a small website. I was scratching my head for vertical in combination with horizontal centering. Your links have been useful to me.

Thanks a lot.

**Joe3000** · 03-28-2008, 12:01 PM

Thank you.

Some of those were quite hard to follow but I found this one the easiest for centering a DIV in the middle of a page - horizontal and vertical.

**WebdesignGold** · 04-10-2008, 03:28 PM

Quote:

Originally Posted by audiomad

or simply use this

}
#container {
margin:0 auto;
width:860px;
bottom:0;
}

Quote:

Originally Posted by LadynRed

It's not ALWAYS that simple.. and as you can see if you read the articles, there are many different solutions.

Actually it is simple if you use that method in conbination with the right DOCTYPE. For instance, the following won't work:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

But this will:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

And of course, the stylesheet:

HTML Code:

#container {
 margin: 0 auto;
 width: 960px;
 }

**Gilligan** · 04-10-2008, 06:16 PM

But still, she said

"its not ALWAYS"

meaning most of the time it will work.

**LadynRed** · 04-11-2008, 10:34 AM

IMO, if you're using a Transitional doctype with LOOSE, you're just being a lazy coder and not doing your audience any favors.

**RosaJ82** · 05-08-2008, 11:33 AM

thanks again

**sfpavel** · 05-09-2008, 08:17 AM

thnx a lot. no more googleing on how to center bloody divs

**abhi** · 07-25-2008, 04:01 AM

very useful things. I have already make used of one of the guide.

**umurali2000** · 07-29-2008, 08:59 AM

its useful to me .. thanks a lot ...do share more of this kind.. useful for webdesigners like me

**dev114** · 08-24-2008, 03:25 PM

niceee thanks!

**tosbourn** · 08-25-2008, 11:12 AM

Very handy, cheers.

**thurrz** · 08-26-2008, 03:26 AM

Thanks
Before my site used to a problems regarding centering of divs

**John_audson** · 08-30-2008, 06:17 AM

Hello,
You can use this code
#content {
width: 700px ;
margin-left: auto ;
margin-right: auto ;
}

**zerodash** · 09-05-2008, 02:14 AM

Quote:

Quote:
Originally Posted by audiomad
or simply use this

}
#container {
margin:0 auto;
width:860px;
bottom:0;
}
Quote:
Originally Posted by LadynRed
It's not ALWAYS that simple.. and as you can see if you read the articles, there are many different solutions.

Isn't that like all you neeed?... It's the only one I know, and has never failed me. XP

**LadynRed** · 09-05-2008, 09:11 AM

As I stated, there are many solutions depending on what you're trying to accomplish and how your layout is done. Most of the time the margin:0 auto with a width is all that's needed to horizontally center a layout. Some people want to center vertically too, and others who use absolute positioning for everything may not be able to use this simple solution. So.. it depends!

**dietcorenet** · 09-06-2008, 04:27 PM

Wow!
Nothing like a little bit of information to make the light bulb come on!

Thanks