Horizontal & Vertical Centering of Div's

nathan · October 2005

I need to know if this is possible for a div to be horizontally and vertically centered on a page, WITHOUT know the width and height of the page before hand. I know it is possible with CCS, BUT, it only works in Safari. Does anyone know of a JS way to do this? I would really appreciate your help. Thanks heaps.

nathan · October 2005

Oh. BTW, this is for the login/ signup page for my new vanilla theme. I am not sure if it will be publically available (it is for work), but I will try.

dknowles · October 2005

horizontal:


.divClassName {
  margin-left: auto;
  margin-right: auto;
}

vertical;

much more tricky. i haven't found a good way of doing it. i'm sure you can do it in javascript, but i'm not too handy with javascript.

nathan · October 2005

thanks. I got that one just before, not that way though. SoI will use this one. I really need the vertical! I did fins a few CSS hacks, but as I said, it only works in Safari, and that just won't do. Anyone for a JS version.

nathan · October 2005

I found this [1] which lets you horizontally AND vertically center and image tag, BUT only if you know the width of the div it is on. I am not sure if this could help anyone! [1] http://www.brunildo.org/test/img_center.html

giginger · October 2005

The way I've got an element centered is using this:

#horizon {
position: absolute;
top: 50%;
left: 0px;
width: 100%;
margin-top: -50px;
min-width: 330px;
}

Then putting the image in the centre. Admittedly, my friend did it for me. Have a look at the source of the front page of my site

http://www.bambambambambam.co.uk to see how it works.

nathan · October 2005

Thanks giginger. I can test this myself, but do you know what browsers this does, does not work in?

Kosmo · October 2005

In CSS there is no unified way to absolute center objects, browsers like IE doesn't recognize the vertical positioning of an element, IIRC.

Propably the easiest way to do that is with JS, or possibly with DHTML, I saw it done once, but it was alot of doohikeys.

But you might want to test something like this

 
 position:absolute;
 margin:-100px 0px 0px -200px;
 top: 50%; 
 left: 50%;

nathan · October 2005

Kosmo, I just checked/ tested the code submitted by giginger, and it working in FF, Safari and Camino on the mac, and ff and ie on windows. Thanks for that giginger. I will probably use this method.

giginger · October 2005

I could only vouch for FF and IE becuase I don't have a Mac or Linux.

Thanks should really go to the user epohs who's here sometimes. He's the person who told me

Glad it worked though.

timberford · October 2005

that's a really clever piece of css, so simple as well!

lech · October 2005

I do believe this will only work in html 4.0 transitional and below, otherwise you're asking for a headache if you try to throw this one at xhtml 1.0 strict.

giginger · October 2005

My page is XHTML Transitional and it works on that. I can't say for strict though.

nathan · October 2005

I don't care about Script for this project. So for the moment, I will still use that piece of code.

dknowles · October 2005

oh, right! that's how you do it. technically, the top should be -(image height / 2)

the auto-margins are the de-facto way to do horizontal centering, from what i've gathered. i think ie prefers the text-align:center, though.

Kosmo · October 2005

Well, what I have experienced, IE works much better with the top: 50%; left: 50%; than with the auto shit, which is the right way to do it when W3C is concerned. And about XHTML strict, I don't think that you are allowed to use ANY descriptive information on the tags themselfs, i.e. <body bgcolor="xxx"> vs. <body>

timberford · October 2005

yeah i have to say i didn't think xhtml strict would be concerend with what you place in your stylesheet.

Horizontal & Vertical Centering of Div's

Comments