Centering DIV with CSS

Forum Moderators: not2easy

Message Too Old, No Replies

Centering DIV with CSS

BootySlap

9:54 am on Mar 10, 2003 (gmt 0)

Hi,
I have a DIV box on a page. I want to center this box horizontally and vertically on the page using CSS how is this done?

I have tried .center {vertical-align: middle} without any luck please help!

highman

10:08 am on Mar 10, 2003 (gmt 0)

http://bluerobot.com/web/css/center1.html

http://bluerobot.com/web/css/center2.html

may help

BootySlap

10:23 am on Mar 10, 2003 (gmt 0)

excellent thanks ive solved the horizontal alignment now what about vertical?

SuzyUK

10:24 am on Mar 10, 2003 (gmt 0)

Hi Bootyslap Welcome to WW

previous 2 links are excellent for horizontal centering.

Vertical centering is a bit of a nightmare using CSS, but there is a workaround [wpdfd.com]

Suzy

BootySlap

10:37 am on Mar 10, 2003 (gmt 0)

Wow, thankyou very much SuzyUK much appreciated!

madcat

1:37 pm on Mar 10, 2003 (gmt 0)

SuzyUK- Cool workaround, thanks for the link.

ricfink

12:25 am on Mar 11, 2003 (gmt 0)

excellent, thanks

securecat

4:46 pm on Mar 20, 2003 (gmt 0)

Vertically centering DIV is realized in this way:

[in HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>vertically centering DIV</title></head>
<body>
<div>OBJECT</div>
</body>
</html>

[in CSS]
html { display:table; margin:0; padding:0; width:100%; height:100%; border-spacing:0; }
body { display:table-row; }
div { display:table-cell; padding:0; text-align:center; vertical-align:middle; }

Correctly rendered in Mozilla.
It arranges `OBJECT` in the center of top and bottom.