<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
无论 div 元素有多高，如何在 div 标签内垂直居中 h1 标签？即，如果用户更改了他的浏览器高度，我希望 h1 根据新高度垂直居中对齐。
谢谢。
【问题讨论】：
<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center; height:20px; position:relative; top:50%; margin-top:-10px;">Text</h1>
</div>
</body>
【讨论】：
<br/> 强制第二行！
<h1> 的高度并给出一半的负边距
在我看来，div 在这种情况下不是合适的选择。我的建议是使用table 和vertical-align 风格的tds。
【讨论】：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
background-color: #0c0c0c;
}
.object {
background-color: #666666;
height: 350px;
width: 600px;
}
.verticalCenter {
width:600px;
height:350px;
position:absolute;
left:50%;
top:50%;
margin:-175px 0 0 -300px;
}
-->
</style>
</head>
<body>
<div class="verticalCenter">
<div class="object">cetnered</div>
</div>
</body>
</html>
您必须在 .verticalCenter 类中设置与要居中的对象（div、flash、图像、文本）相同的高度和宽度。并且边距必须是这些高度和宽度的一半。
如果您动态更改该对象，我认为没有解决方案。除非，也许使用 javascripts。
【讨论】：
这是一个相当简单的解决方案。它主要基于设置display:table-cell 并选择像中间这样的垂直对齐方式。
HTML：
<div id="vertical">
<p>this text is vertically centered. It's long enough to wrap, and should work for any size chunk of content.</p>
<p>Heck, it even works with multiple items in the middle.</p>
</div>
CSS：
#vertical {
display:table-cell;
vertical-align:middle;
height: 500px;
width: 300px;
}
JSFiddle：http://jsfiddle.net/6Re3E/1/
【讨论】：
我遇到过的最佳解决方案是利用display 属性并将包装元素设置为table 以允许在要居中的元素上使用vertical-align:middle：
看到这个 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 专业版 2002 Service Pack 3
Windows 7 家庭版服务包 1
Linux Ubuntu 12.04
【讨论】：
有一个跨（桌面）浏览器解决方案可以使用 CSS2 + CSS3 完成此操作，无需任何 Javascript。
适用于
文档：CSS 中的垂直居中 高度未知的最终解决方案：
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
清洁 jsFiddle 示例：http://jsfiddle.net/WYgsP/
<div class="outerBox">
<div class="helper">
<div class="boxWithUnknownHeight">
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
CSS
.outerBox {
display: table;
height: 400px;
#position: relative; /* ie hack */
overflow: hidden;
border: 1px solid red;
}
.helper {
#position: absolute; /* ie hack */
#top: 50%; /* ie hack */
display: table-cell;
vertical-align: middle;
}
.boxWithUnknownHeight {
#position: relative; /* ie hack */
#top: -50%;
border: 1px solid green
}
它可以工作，即使我通过 Firebug 等添加文本和换行符。
为了让你的 CSS 免受无效 CSS-Hacks 的影响，我建议你使用 conditional comments 并创建带有浏览器特定代码的单独 CSS。
未知高度的垂直居中是如何工作的以及为什么：Detailed description
其他解决方案与display: table 和或display: table-cell 和或绝对定位here。
【讨论】：
我认为最不突兀和最不令人困惑的答案是在 <h1> 元素之前插入一个 <span> 标签：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/
【讨论】：
<span> 和 <h1> 标记之间添加的空格会影响垂直对齐。
:before 伪元素会更简单。 jsfiddle.net/6kk8yyxk/1
我对所有事情都使用表格。当某些东西已经存在时，我个人不喜欢使用display: table 或类似的东西。
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
使用同样的方法，您可以针对您的情况执行以下操作：
<div id="container-div" style="position: relative">
<div id="random-content-that-changes-container-height-and-width" style="height: 600px; width: 400px;">
<div style="position: absolute; top: 0; right: 0; left: 0; bottom: 0">
<table style="width: 100%; height: 100%;">
<tr>
<td>
<!-- Whatever you want vertically and horizontally centered -->
</td>
</tr>
</table>
</div>
</div>
【讨论】：
我有最简单的 3 行 css 会让你大吃一惊，你会想“为什么我一开始没有想到这个”。在您希望垂直居中放置的元素上使用它，并且父容器只需添加 100% 的高度。
position: relative;
top: 50%;
transform: translateY(-50%);
位置可以是相对的、绝对的或固定的。
【讨论】：
在 2012 年，接受的答案是正确/最佳选择。
快进 8 年，flex boxes are supported by every mainstream browser (IE10+)：
display: flex;
align-items: center;
flex-direction: column; /* To also center horizontally, change to `rows` or remove */
注意：如果您关心 IE10，则需要根据我上面的超链接包含 -ms- 前缀版本。
【讨论】：
top: 50% 和 transform: translateY(50%) 或表格