分享程序员开发的那些事...
更新时间：2022-11-01 23:10:47
我遇到的***的解决方案是使用 display wrapper元素作为表以允许在元素上使用 vertical-align：middle p>
查看此 工作小提示示例！
HTML
< body&
< div>
< h1>文字< / h1>
< / div>
< / body>
CSS
body {width：100％; height：100％;} / *这只是查看div高度... * /
div {
position：absolute;高度：100％; width：100％;
display：table;
}
h1 {
display：table-cell;
vertical-align：middle;
text-align：center;
}
Windows XP Profissionalversão2002 Service Pack 3
Windows 7 Home Edition Service Pack 1
Linux Ubuntu 12.04
<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