Centering a DIV within a DIV?

[Robert Latest]

Hello,

me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.

The only alignment-relevant CSS property I could think of was
text-align, and that didn't work.

Of course I could put the DIV into a one-cell table and use the td's
align and vertical-align attributes, but let's assume I don't want to
use tables for that type of stuff.

Thanks,
robert

[Robert Latest]

On 27 Oct 2005 14:31:41 GMT,
Robert Latest <bo*******@yahoo.com> wrote
in Msg. <3s************@individual.net>

me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.

I just found the negative-margin trick. Kinda ugly, but works well
enough.

Thanks,
robert

[Els]

Robert Latest wrote:

On 27 Oct 2005 14:31:41 GMT,
Robert Latest <bo*******@yahoo.com> wrote
in Msg. <3s************@individual.net>

me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.

I just found the negative-margin trick. Kinda ugly, but works well
enough.

Only until the viewport becomes smaller than the inner div.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -

[David Ross]

Robert Latest wrote:

Hello,

me again. This time I'd like to align a DIV both horizontally and
vertically centered within a larger DIV.

The only alignment-relevant CSS property I could think of was
text-align, and that didn't work.

Of course I could put the DIV into a one-cell table and use the td's
align and vertical-align attributes, but let's assume I don't want to
use tables for that type of stuff.

For horizontal centering, the inner DIV should have the following
style:
margin-left: auto;
margin-right: auto;
width: nn%;
where nn is the desired width as a percentage of the width of the
outer DIV. I do this all the time.

For vertical centering, try doing the same with margin-top,
margin-bottom, and height. I have never done this, so I'm not sure
of the results.

--

David E. Ross
<URL:http://www.rossde.com/>

I use Mozilla as my Web browser because I want a browser that
complies with Web standards. See <URL:http://www.mozilla.org/>.