TESTED ON

Question

<body>
    <div style="position:absolute; height:100%; width:100%;">
        <h1 style="text-align:center;">Text</h1>
    </div>
</body>

无论div元素有多高，我如何将div标签内的h1标签垂直居中？即如果用户更改了浏览器高度，我希望h1根据新的高度在中心垂直对齐。

感谢。

Answer 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;
}

TESTED ON

Windows XPProfissionalversão2002Service Pack 3

Internet Explorer 8.0.6001.18702
Opera 11.62
Firefox 3.6.16
Safari 5.1.2
Google Chrome 18.0.1025.168 m

Windows 7 Home Edition Service Pack 1

Internet Explorer 9.0.8112.164211C
Opera 11.62
Firefox 12.0
Safari 5.1.4
Google Chrome 18.0.1025.168 m

Linux Ubuntu 12.04

Firefox 12.0
Chromium 18.0.1025.151（Developer Build 130497 Linux）

Answer 2

我发现最不突兀且最不容易混淆的答案要求在<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/

Answer 3

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>

Answer 4

我有最简单的3行css会让你大吃一惊，你会想到“为什么我最初没有想到这一点”。在您希望垂直居中的元素上使用此元素，而父容器只需添加100％的高度。

position: relative;
top: 50%;
transform: translateY(-50%);

该职位可以是相对的，绝对的或固定的。

Answer 5

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-前缀版本。

Answer 6

<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。

Answer 7

这是一个相当简单的解决方案。它主要基于设置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/

Answer 8

有一个交叉（桌面）浏览器解决方案，可以使用CSS2 + CSS3并且没有任何Javascript。

适用于

IE5 +
Gecko（Mozilla，Firefox，Netscape 7）
Opera 7 +
Konqueror 3 +
Webkit浏览器（Safari，谷歌浏览器）
以及更多（未经测试的移动浏览器）

文档：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-Hack的影响，我建议您使用conditional comments并使用浏览器特定代码创建单独的CSS。

未知高度的垂直居中确切如何工作以及原因：Detailed description

其他解决方案 display: table和/或display: table-cell和/或绝对定位here。

Answer 9

我用表来表示一切。我个人不喜欢使用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>

Answer 10

从我的观点来看，div在这种情况下不适合。我的建议是在table s上使用vertical-align和td样式。

如何在动态高度div中垂直居中显示文本？

10 个答案:

TESTED ON