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.

Post Written by Tison Kelley

Tison Kelley , B.S., specializes in User Interface Design and User Experience in enterprise architectures. Nationally, he has worked with the U.S. Navy, Federal Aviation Administration, and the University of San Diego's Institute for Peace & Justice. Regionally, he has worked with McDonald's franchises, SAAB Sensis Corp, Consumer Credit Counseling, C.B. Richard Ellis, Upstate HomeCare and CNY organizations in a wide variety of industries. He is proficient in XHTML, CSS and Javascript development, as well as PHP, and MySQL on the server-side. He has recently exhibited at trade conferences; Gartner Enterprise Content Management in Las Vegas and Search Engine Strategies NYC. Kelley is a native of Syracuse, N.Y. and has a B.S. in Information Studies & Technology from Syracuse University. He was the founding director of a 501c3 organization that has helped donate over $15,000 for multiple sclerosis research.


18 Responses to “Vertical & Horizontal Centering w/ 3 lines of CSS”

  1. Xan says:

    Tried it doesn’t seem to worl

  2. Tison says:

    Xan – paste your code here and we’ll see if we can get you setup.

  3. RVata says:

    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:

  4. RVata says:

    I added the <body code but it was swallowed up in the comment. I copied exactly what you have up there though.

  5. Tison says:

    @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.

  6. RVata says:

    @Tison, wikkid. Thanks a bunch!

  7. Lindsay says:

    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;}

  8. Marcus Randall says:

    Thankyou very much, works perfectly.

  9. soulnblack says:

    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.

  10. Hi I love this forumI’m also passionated in extreme sport and strategies to be far more effective…I found a piece technology that make me much more efficientThanks again for your forumBye power balance pas cher power balance discount cheap powerbalance

  11. Good post. Cheers for, going to that weblog web page mate. I’ll message you soon! I didn’t comprehend which!

  12. [...] Vertical & Horizontal Centering w/ 3 lines of CSS | breakthrough design. LD_AddCustomAttr("AdOpt", "1"); LD_AddCustomAttr("Origin", "other"); LD_AddCustomAttr("LangId", [...]

  13. Do you mind if I post your article in my monthly newsletter? I think your writing would suit my readers perfectly. Well, thanks for writing this.

  14. Works flawlessly in Firefox, but I’m having a slight issue in IE that I can’t diagnose. The text renders with what looks like about 80-90% opacity (i.e. all quote text looks light…but only in IE).

  15. Dino Klement says:

    Very nice post. I definitely love this site. Keep it up!

  16. Keep functioning ,great job!

Leave a Reply

We will always build beautiful websites that rank high on search engines.

All About Us

Put simply, our work builds organizations. We've worked with organizations in both public & private sectors.
Read more

Contact

2610 S. Salina St.
Syracuse, NY 13205
Mon - Thurs 9am - 5pm
315.233.9283
info@gobdg.com

Get Started

People tell us there's a recession. Could have fooled our clients.
Get Started!