我如何垂直居中文本dynamic高度div？
<body> <div style="position:absolute; height:100%; width:100%;"> <h1 style="text-align:center;">Text</h1> </div> </body> 无论div元素有多高，我如何将h1标签垂直居中放置在div标签内？ 即如果用户改变浏览器的高度，我希望h1根据新的高度在中心垂直alignment。
谢谢。
我遇到过的最好的解决scheme是使用display属性，并将wrapper元素设置为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; }
已testing
Windows XP Profissional 2002版Service Pack 3
- Internet Explorer 8.0.6001.18702
- 歌剧11.62
- Firefox 3.6.16
- Safari 5.1.2
- 谷歌浏览器18.0.1025.168米
Windows 7家庭版服务包1
- Internet Explorer 9.0.8112.164211C
- 歌剧11.62
- Firefox 12.0
- Safari 5.1.4
- 谷歌浏览器18.0.1025.168米
Linux Ubuntu 12.04
- Firefox 12.0
- Chromium 18.0.1025.151（开发人员构build130497 Linux）
我发现最不引人注意和最less混淆的答案需要在<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; }
将此技术扩展为垂直alignment浏览器高度： http : //jsfiddle.net/Wexcode/axRxE/1/
<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>
<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，image，text）相同。 而边距必须是这些高度和宽度的一半。
如果你dynamic地改变这个对象，我不认为有解决scheme。 除非，也许与JavaScripts。
这是一个相当简单的解决scheme。 它主要基于设置display:table-cell和select中间的垂直alignment方式。
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/
有一个交叉（桌面）浏览器解决scheme来做到这一点与CSS2 + CSS3和没有任何Javascript。
在英国工作
- IE5 +
- 壁虎（Mozilla，Firefox，Netscape 7）
- 歌剧7+
- Konqueror 3+
- Webkit浏览器（Safari，Google Chrome）
- 和更多（移动浏览器未经testing）
文档：CSS未知高度的垂直居中解决scheme：
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-Hack干扰，我build议你使用条件注释来创build一个独立的CSS和浏览器特定的代码。
如何垂直居中与未知的高度正确工作，为什么： 详细的描述
其他带display: table 解决scheme display: table和/或display: table-cell和/或绝对定位在这里 。
我用桌子来做一切事情。 我个人不喜欢使用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%);
位置可以是相对的，绝对的或固定的。
从我的angular度来看， div在这种情况下是不适合的select。 我的build议是去table和vertical-align样式的td 。
