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.
Solution 1:
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)
Solution 2:
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/