<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.
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;
}
Windows XP Profissional versão 2002 Service Pack 3
Windows 7 Home Edition Service Pack 1
Linux Ubuntu 12.04
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/
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.
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.
<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>
There's a cross (desktop) browser solution to do this with CSS2 + CSS3 and without any Javascript.
Works in
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/
<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.
<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.
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/
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>
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.
