无论div元素有多高,我如何在h1标签内垂直居中放置h1标签?即如果用户更改他的浏览器高度,我希望h1根据新的高度在中心垂直对齐。
谢谢。
我遇到过的最好的解决方案是利用display属性并将wrapper元素设置为,table以允许vertical- align:middle对元素的使用居中:
display
table
vertical- align:middle
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 Professional 2002版Service Pack 3
Windows 7家庭版Service Pack 1
Linux Ubuntu 12.04