Alb*_*ion 36 html css centering
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
无论div元素有多高,我怎样才能将div标签内的h1标签垂直居中？即如果用户更改其浏览器高度,我希望h1根据新高度在中心垂直对齐.
谢谢.
Zuu*_*uul 61
我遇到过的最好的解决方案是使用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 XPProfissionalversão2002Service Pack 3
Windows 7 Home Edition Service Pack 1
Linux Ubuntu 12.04
Wex*_*Wex 17
答案我发现最不突兀,最不容易混淆,需要<span>在<h1>元素之前插入一个标记: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; }?
扩展此技术以垂直对齐浏览器高度:http://jsfiddle.net/Wexcode/axRxE/1/
2012 年，接受的答案是正确/最佳选择。
Flash向前8年，所有主流浏览器（IE10+）都支持flex box：
display: flex;
align-items: center;
flex-direction: column; /* To also center horizontally, change to `rows` or remove */
注意：如果您关心 IE10，则需要-ms-根据我上面的超链接包含前缀版本。
我有最简单的 3 行 css，它们会让你大吃一惊，你会想“为什么我最初没有想到这一点”。在要垂直居中放置的元素上使用它，父容器只需添加 100% 的高度。
position: relative;
top: 50%;
transform: translateY(-50%);
位置可以是相对的、绝对的或固定的。