42
<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center;">Text</h1>
    </div>
</body>

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.

Thanks.

1

10 Answers 10

70

The best solution I've ever encountered is to make use of the display property and set the wrapper element as a table to allow the usage of vertical-align:middle on the element to be centered:

See this working Fiddle Example!

HTML

<body>
    <div>
        <h1>Text</h1>
    </div>
</body>

CSS

body {width: 100%; height: 100%;}   /* this is just to "view" the div height...*/

div {
    position:absolute; height:100%; width:100%;
    display: table;
}
h1 {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
}

TESTED ON

Windows XP Profissional versão 2002 Service Pack 3

  • Internet Explorer 8.0.6001.18702
  • Opera 11.62
  • Firefox 3.6.16
  • Safari 5.1.2
  • Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

  • Internet Explorer 9.0.8112.164211C
  • Opera 11.62
  • Firefox 12.0
  • Safari 5.1.4
  • Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

  • Firefox 12.0
  • Chromium 18.0.1025.151 (Developer Build 130497 Linux)
4
  • 1
    This won't work in IE7 and lower. But if that's not a concern - this is the best solution. +1 Jun 7, 2012 at 20:50
  • This is an offline Kiosk so the app will only be run in Firefox. This solution worked great in my case. +1
    – Albion
    Jun 13, 2012 at 15:43
  • 1
    I think this is a good solution for dynamic height as well as static height container, works well.
    – Sanjeev
    Jul 14, 2014 at 6:16
  • 1
    See a BETTER answer for IE10+: stackoverflow.com/a/60909392/8804293 Oct 20, 2020 at 23:09
19

The answer I find the least obtrusive and least confusing requires inserting a <span> tag before the <h1> element: http://jsfiddle.net/Wexcode/axRxE/

HTML:

<div>
    <span></span><h1>Text</h1>
</div>​

CSS:

div { text-align: center; /* horizontally center */ }
div span {
    height: 100%;
    vertical-align: middle;
    display: inline-block; }
div h1 {
    vertical-align: middle;
    display: inline-block; }​

Expanding this technique to vertically-align to the browser-height: http://jsfiddle.net/Wexcode/axRxE/1/

4
  • Thanks for that nice workaround! I wrote a fallback for non capable browsers here
    – doptrois
    Jun 10, 2012 at 9:38
  • The whitespace you added between your <span> and <h1> tags throws off the vertical-alignment.
    – Wex
    Jun 10, 2012 at 9:47
  • 1
    Nothing I found worked. This one is simply awesome, thanks man!
    – Daniel Z.
    Jan 29, 2015 at 12:32
  • 1
    This will be more simple by :before pseudo-element. jsfiddle.net/6kk8yyxk/1
    – hakatashi
    Apr 13, 2016 at 3:28
7

I have the easiest 3 lines of css which are going to blow your mind and you will be thinking "Why didn't I think of this initially". Use this on the element you would like to be positioned vertically centered and the parent container just add a height of 100%.

position: relative;
top: 50%;
transform: translateY(-50%);

The position can be either relative, absolute or fixed.

7

In 2012, the accepted answer was the correct/best option.

Flash forward 8 years, and flex boxes are supported by every mainstream browser (IE10+):

display: flex;
align-items: center;
flex-direction: column;  /* To also center horizontally, change to `rows` or remove */

Note: If you care about IE10, you need to include -ms- prefix versions, per my hyperlink above.

1
  • 1
    Yeah, I too prefer flex over top: 50% and transform: translateY(50%) or tables Mar 29, 2020 at 2:24
4

http://jsfiddle.net/xQBbQ/

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
    </div>
</body>
3
  • That will fail for long texts that reach two or more lines, see this simulation with a <br/> to force the second line!
    – Zuul
    Jun 7, 2012 at 20:29
  • @Zuul the OP didn't state how long will be the text. Anyways the idea is to set the height of <h1> and give a negative margin of half of that Jun 7, 2012 at 20:34
  • Just pointing out a "yet to come" problem! You continue to be right, plus, here's a +1 just to prove it!
    – Zuul
    Jun 7, 2012 at 20:40
2

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:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Clean jsFiddle Example: http://jsfiddle.net/WYgsP/


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
        </div>
    </div>
</div>​

CSS

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

1
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
    background-color: #0c0c0c;
}
.object {
    background-color: #666666;
    height: 350px;
    width: 600px;
}
.verticalCenter {
    width:600px;
    height:350px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
    <div class="verticalCenter">
        <div class="object">cetnered</div>
    </div>
</body>
</html>

You must set height and width in .verticalCenter class the same as of your object (div, flash, image, text) that is to be centered. And margins must be half of these height and width.

I don't think there is solution if you change that object dynamically. Unless, maybe with javascripts.

1

Here's a fairly simple solution. It's mostly based on setting display:table-cell and choosing a vertical alignment like middle.

HTML:

<div id="vertical">
    <p>this text is vertically centered.  It's long enough to wrap, and should work for any size chunk of content.</p>
    <p>Heck, it even works with multiple items in the middle.</p>
</div>​​

CSS:

#vertical {
    display:table-cell;
    vertical-align:middle;
    height: 500px;
    width: 300px;
}​

JSFiddle: http://jsfiddle.net/6Re3E/1/

2
  • True, it's not going to work for IE6 or 7. I'm sure a simple JS solution exists for IE7. Life's too short to be worried over IE6. Jun 7, 2012 at 20:37
  • This site show a solution for both, which is a mix of our methods (yours needs a tweak with a container being centered instead of the raw contents): boutell.com/newfaq/creating/centervertically.html Jun 7, 2012 at 20:40
1

I use tables for everything. I personally do not enjoy usingdisplay: table or anything like that when there is something that already exists.

<table style="width: 100%; height: 100%;">
    <tr>
        <td>
            <!-- Whatever you want vertically and horizontally centered -->
        </td>
    </tr>
</table>

Using this same method, you can do something like this for your case:

<div id="container-div" style="position: relative">
    <div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
    <div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
        <table style="width: 100%; height: 100%;">
            <tr>
                <td>
                    <!-- Whatever you want vertically and horizontally centered -->
                </td>
            </tr>
         </table>
     </div>
</div>
3
-2

From my point of view, divis not appropriate choice in this case. My suggestion is go for table and vertical-align style on it's tds.

5
  • 2
    Don't use a table for non-tabular data. Jun 7, 2012 at 20:27
  • 3
    Tables not acceptable semantically to anything but tabular data. Jun 7, 2012 at 20:27
  • It's more reliable solution for designing cross browser.
    – Tooraj Jam
    Jun 7, 2012 at 20:31
  • 1
    Nope. For page structure it's even more evil. Forget about tables :) Jun 7, 2012 at 20:32
  • Good point for today. I didn't think about that. Thanks guys.
    – Tooraj Jam
    Jun 7, 2012 at 20:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.