Comments on: Vertical & Horizontal Centering w/ 3 lines of CSS

By: soulnblack

soulnblack — Sat, 05 Dec 2009 07:19:09 +0000

I think I got the repair for IE. At least it worked on my IE8 version.

Modify as following:
#ht3 {#position: relative; #top: -50%;#left: -50%;margin:0 auto;border:1px solid green;width:900px;height:600px}

Check it out.

By: Marcus Randall

Marcus Randall — Tue, 17 Nov 2009 12:43:56 +0000

Thankyou very much, works perfectly.

By: Lindsay

Lindsay — Tue, 14 Jul 2009 08:11:31 +0000

Just have a question. I am trying to center a background image as a frame (954px wide and 600px high) around my content inside (775px wide and 450px high). I can get it to center the frame correctly and the content inside will center horizontally, but not vertically.

Here is my code. Any suggestions?

.ht1{display:table; #position:relative; overflow:hidden; width:100%; height:100%;}
.ht2{#position:absolute; #top:50%; display:table-cell; vertical-align:middle; text-align:center;}
.ht3{#position:relative; #top:-50%; margin:0 auto 0 auto; background:url(../img/frame.png) no-repeat; width:954px; height:600px;}
.ht4{display:table; #position:relative; overflow:hidden; width:100%; height:100%;}
.ht5{#position:absolute; #top:50%; display:table-cell; vertical-align:middle; text-align:center;}
.ht6{#position:relative; #top:-50%; margin:0 auto 0 auto; background-color:#222; width:775px; height:450px;}

By: RVata

RVata — Thu, 25 Jun 2009 05:05:24 +0000

@Tison, wikkid. Thanks a bunch!

By: Tison

Tison — Tue, 16 Jun 2009 15:54:07 +0000

@RVata @Xan,

To clear up some confusion – We had left the widths & heights out of the divs in order to allow you to customize your own layout. However, I’ve added them back in (see the green notes above). This way everything is included, and you can change the widths & heights as needed for your own installation.