如何在动态高度 div 中垂直居中文本？
Posted
技术标签:
【中文标题】如何在动态高度 div 中垂直居中文本？【英文标题】：How can I vertically center text in a dynamically height div? 【发布时间】：2012-06-11 22:46:17 【问题描述】：<body>
<div style="position:absolute; height:100%; width:100%;">
<h1 style="text-align:center;">Text</h1>
</div>
</body>
无论 div 元素有多高，如何在 div 标签内垂直居中 h1 标签？即，如果用户更改了他的浏览器高度，我希望 h1 根据新高度垂直居中对齐。
谢谢。
【问题讨论】：
这是一篇关于这个主题的优秀文章：phrogz.net/css/vertical-align/index.html 【参考方案1】：http://jsfiddle.net/xQBbQ/
<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>
【讨论】：
对于达到两行或多行的长文本将失败，请参阅this simulation 和<br/> 强制第二行！
@Zuul OP 没有说明文本将持续多长时间。无论如何，这个想法是设置<h1> 的高度并给出一半的负边距
只是指出一个“尚未解决”的问题！您仍然是对的，另外，这里有一个 +1 来证明这一点！【参考方案2】：
在我看来，div 在这种情况下不是合适的选择。我的建议是使用table 和vertical-align 风格的tds。
【讨论】：
不要将表格用于非表格数据。 除了表格数据之外，表格在语义上不可接受。 更可靠的跨浏览器设计方案。 不。对于页面结构，它更加邪恶。忘记桌子:) 今天的重点。我没想到。谢谢大家。【参考方案3】：<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。
【讨论】：
【参考方案4】：这是一个相当简单的解决方案。它主要基于设置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/
【讨论】：
没错，它不适用于 IE6 或 7。我确信 IE7 存在一个简单的 JS 解决方案。生命太短暂了，不用担心 IE6。 本网站展示了两者的解决方案，它是我们方法的混合（您需要调整容器居中而不是原始内容）：boutell.com/newfaq/creating/centervertically.html【参考方案5】：我遇到过的最佳解决方案是利用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
Internet Explorer 8.0.6001.18702 Opera 11.62 火狐 3.6.16 Safari 5.1.2 谷歌浏览器 18.0.1025.168 mWindows 7 家庭版服务包 1
Internet Explorer 9.0.8112.164211C Opera 11.62 火狐12.0 Safari 5.1.4 谷歌浏览器 18.0.1025.168 mLinux Ubuntu 12.04
火狐12.0 Chromium 18.0.1025.151（开发者内部版本 130497 Linux）【讨论】：
这在 IE7 及更低版本中不起作用。但如果这不是问题 - 这是最好的解决方案。 +1 这是一个离线信息亭，因此该应用程序只能在 Firefox 中运行。这个解决方案在我的情况下效果很好。 +1 我认为这是一个很好的动态高度以及静态高度容器的解决方案，效果很好。 查看 IE10+ 的更好答案：***.com/a/60909392/8804293【参考方案6】：有一个跨（桌面）浏览器解决方案可以使用 CSS2 + CSS3 完成此操作，无需任何 Javascript。
适用于
IE5+ Gecko（Mozilla、Firefox、Netscape 7） Opera 7+ Konqueror 3+ Webkit 浏览器（Safari、Google Chrome） 还有更多（未测试移动浏览器）文档：CSS 中的垂直居中 高度未知的最终解决方案：http://www.jakpsatweb.cz/css/css-vertical-center-solution.html清洁 jsFiddle 示例：http://jsfiddle.net/WYgsP/
HTML
<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。
【讨论】：
【参考方案7】：我认为最不突兀和最不令人困惑的答案是在 <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/
【讨论】：
感谢您提供的出色解决方法！我为不支持的浏览器写了一个后备here 您在<span> 和 <h1> 标记之间添加的空格会影响垂直对齐。
我没有发现任何工作。这个简直太棒了，谢谢伙计！
:before 伪元素会更简单。 jsfiddle.net/6kk8yyxk/1【参考方案8】：
我对所有事情都使用表格。当某些东西已经存在时，我个人不喜欢使用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>
【讨论】：
人们担心语义类 (impressivewebs.com/avoid-nonsemantic-classes) 而您使用表格元素进行布局？ 没关系，显然是一个老评论，但如果你仍然是，请检查：***.com/a/84986/2848941【参考方案9】：我有最简单的 3 行 css 会让你大吃一惊，你会想“为什么我一开始没有想到这个”。在您希望垂直居中放置的元素上使用它，并且父容器只需添加 100% 的高度。
position: relative;
top: 50%;
transform: translateY(-50%);
位置可以是相对的、绝对的或固定的。
【讨论】：
【参考方案10】：在 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- 前缀版本。
【讨论】：
是的，我也更喜欢 flex 而不是top: 50% 和 transform: translateY(50%) 或表格以上是关于如何在动态高度 div 中垂直居中文本？的主要内容，如果未能解决你的问题，请参考以下文章