<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