<div style="position:absolute; height:100%; width:100%;">

        <h1 style="text-align:center;">Text</h1>



How can I vertically center the h1 tag inside of the div tag, no matter how tall the div element is? i.e. If the user changes his browser height, I want the h1 to vertically align in the center, according to the new height.


Best Answer:

There's a cross (desktop) browser solution to do this with CSS2 + CSS3 and without any Javascript.

Works in

  • IE5+
  • Gecko's (Mozilla, Firefox, Netscape 7)
  • Opera 7+
  • Konqueror 3+
  • Webkit Browsers (Safari, Google Chrome)
  • and a lot more (Mobile browsers not tested)

Documentation: Vertical Centering in CSS Definitive Solution with Unknown Height:

Clean jsFiddle Example: HTML

<div class="outerBox">

    <div class="helper">

        <div class="boxWithUnknownHeight">

            any text<br>

            any height<br>

            any content, for example generated from DB<br>

            everything is vertically centered





.outerBox {

    display: table;

    height: 400px;

    #position: relative; /* ie hack */

    overflow: hidden;

    border: 1px solid red;


.helper {

    #position: absolute; /* ie hack */

    #top: 50%; /* ie hack */

    display: table-cell;

    vertical-align: middle;


.boxWithUnknownHeight {

    #position: relative; /* ie hack */

    #top: -50%;

    border: 1px solid green


It works, even if i add text and line-breaks through Firebug etc.
To keep your CSS clean from invalid CSS-Hacks, I'll recommend you to use conditional comments for it and create a separate CSS with the browser specific Code.

How vertical centering with unknown height exactly works and why: Detailed description

Other solutions with display: table and or display: table-cell and or absolute positioning here.

Copyright © 2011 Dowemo All rights reserved.    Creative Commons   AboutUs