CSS - Center a
- Is there any way to horizontally center a <div> using CSS
positioning? I would like to center a large division in the middle of
the browser window so that it is always centered, even if a visitor's
window is very large. Then, within that large division, I want to use
CSS positioning to place other divisions with images, text, etc.
This is easy when everything is referenced to the upper left-hand
figure a way to center.
- Hi Mike:
At 12:19 PM 5/3/02 +0000, you wrote:
>Is there any way to horizontally center a <div> using CSSThere are a bunch of attributes that deal with alignment at the
HTML level. Go to the <div> tag in the Compendium and look for align=. Then
follow the links to the working examples and you'll see it working. Resize
the popup and you'll see the constant centering effect.
Next, go to the CSS --> Properties listing of the Compendium down
to the text-align property. Again, scroll down and you'll see "text-align:
center" and you'll see a working example there. Resize the popup as
necessary to see the effect.
>I would like to center a large division in the middle ofThat takes care of the horizontal centering but if you're talking
>the browser window so that it is always centered, even if a visitor's
>window is very large. Then, within that large division, I want to use
>CSS positioning to place other divisions with images, text, etc.
>This is easy when everything is referenced to the upper left-hand
>figure a way to center.
about centering from the top of the window to the bottom, you've got a big
headache with that one. If you figure out vertical centering, let me know.
I could sure use it.
I hope this helps.
The Compendium of HTML Elements
"your essential web publishing resource"
- available at/disponible à:
http://www.htmlcompendium.org/index.htm (Europe and North America)
- Thanks for the great responses!
After much searching, I figured out an unsophisticated solution. You
can see the code here: <a href="http://websites-
This particular solution is very simple, and it's not dynamic. If a
visitor were to resize their browser window, the page would have to
be re-loaded in order to re-center the division.
The same approach could be used to vertically center a division. Use
I only know that this works with IE5.5 and NS6.2.
- Hi Ron,
Thanks for the link to the Compendium. I added it to my Favorites
Regarding the HTML tag <div align=
If you put another <div> within it and use absolute positioning, the
nested <div> position references to the upper left-hand corner of the
window, not the upper left-hand corner of the "parent" <div>, which
is what I want.
Regarding the CSS property text-align: center
This is mainly aimed at text and images. I have found that using it
to center whole divisions works in some browsers, not others.
If you check the link I provided, you will see a simplistic version
the link, so here it is again: