Vertical & Horizontal Centering w/ 3 lines of CSS
This method has become our ‘gold standard’ for centering your sites, images, or anything directly in the center of the page (vertically and horizontally). It’s easy to use, unobtrusive to your other page elements, requires only 3 lines of CSS and no javascript. It’s almost like a CSS plugin of sorts. The only downside is that 3 div elements are required, however, compared to all other solutions we’ve tested, this is minimal overhead, and worth the effort. It’s built on Jakpsatweb’s method for Vertical Centering in CSS. Compatibility:
“The code below works in Internet Explorer 5.0, 5.5 and 6.0, in Gecko browsers (Mozilla, Firefox, Netscape 7), in Opera 7, Konqueror 3.3.1. (maybe lower too), and in Safari. The page can be HTML or XHTML, standard or quirk mode.
Both examples don’t work in IE 5.2 for Mac. As I haven’t Mac, I can’t test it. Please let me know (dusan@pc-slany.cz) when you’d find any workaround.”
Vertical Centering Using CSS
1. Add 3 Classes to Your Stylesheet
.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;border:1px solid green;width:300px;height:200px}
Update: To clear up some confusion – we’ve added the widths & heights as needed above. We had left them out to allow you to customize your own layout, but this way everything is included, and you can change the widths & heights as needed for your installation.
2. Create 3 elements in your HTML
<div class="ht1">
<div class="ht2">
<div class="ht3"></div>
</div>
</div>
Important to Note:
ht1 =Is the main container, this div will be 100% width & height in size, positioned absolutely to the top left.
ht2 = 2nd container needed for vertical centering & positioning.
ht3 = Container to center. This needs an exact px width & height.
3. Set the Height & Width of ‘ht3′ Element.
In order to allow for reusability, we haven’t given this element it’s height or width, you will need to do so. In most cases you will give these elements multiple css classes, that second class is most likely where you will define your height and width.
Voila – vertical & horizontal centering using 3 css classes. Kinda makes me feel like riverdancing.
June 10th, 2009 at 4:36 pm
Tried it doesn’t seem to worl
June 11th, 2009 at 8:53 am
Xan – paste your code here and we’ll see if we can get you setup.
June 16th, 2009 at 12:18 am
Didn’t work for me either…
.ht1 {
display: table;
#position: relative;
overflow: hidden;
}
.ht2 {
#position: absolute;
#top: 50%;
display: table-cell;
vertical-align: middle;
text-align:center;
}
.ht3 {
#position: relative;
#top: -50%;
margin:0 auto 0 auto
}
.cell {
width: 230px;
}
.formtext {
font-family: helvetica, arial, sans-serrif;
font-size: 12px;
}
input, textarea, select {
color: black;
background: #999999;
border: solid #666666 1px;
}
Name:
Message:
June 16th, 2009 at 12:20 am
I added the <body code but it was swallowed up in the comment. I copied exactly what you have up there though.
June 16th, 2009 at 10:54 am
@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.
June 25th, 2009 at 12:05 am
@Tison, wikkid. Thanks a bunch!
July 14th, 2009 at 3:11 am
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;}
November 17th, 2009 at 7:43 am
Thankyou very much, works perfectly.
December 5th, 2009 at 2:19 am
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.