CODEWITHSUNDEEP
htmlcsscentering
Albion
Albion

Reputation: 609

How can I vertically center text in a dynamically height div?

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

Upvotes: 42

Views: 64391

Answers (10)

Devin Burke
Devin Burke

Reputation: 13820

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.

Upvotes: 7

Tom McDonough
Tom McDonough

Reputation: 1262

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.

Upvotes: 7

Superjova
Superjova

Reputation: 29

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>

Upvotes: 1

doptrois
doptrois

Reputation: 1570

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.

Upvotes: 2

Wex
Wex

Reputation: 15705

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/

Upvotes: 19

Zuul
Zuul

Reputation: 16269

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)

Upvotes: 70

Surreal Dreams
Surreal Dreams

Reputation: 26380

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/

Upvotes: 1

heroix
heroix

Reputation: 171

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

Upvotes: 1

Tooraj Jam
Tooraj Jam

Reputation: 1612

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.

Upvotes: -2

Zoltan Toth
Zoltan Toth

Reputation: 47677

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>

Upvotes: 4

Related Questions