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

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

谢谢。

4

10 回答 10

69

我遇到过的最好的解决方案是利用该display属性并将包装元素设置为 atable以允许在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 XP 专业版 2002 Service Pack 3

  • 互联网浏览器 8.0.6001.18702
  • 歌剧 11.62
  • 火狐 3.6.16
  • Safari 5.1.2
  • 谷歌浏览器 18.0.1025.168 m

Windows 7 家庭版服务包 1

  • Internet Explorer 9.0.8112.164211C
  • 歌剧 11.62
  • 火狐12.0
  • Safari 5.1.4
  • 谷歌浏览器 18.0.1025.168 m

Linux Ubuntu 12.04

  • 火狐12.0
  • Chromium 18.0.1025.151（开发人员内部版本 130497 Linux）
于 2012-06-07T20:36:54.903 回答
19

我发现最不突兀和最不混乱的答案需要在元素<span>之前插入一个标签：http: //jsfiddle.net/Wexcode/axRxE/<h1>

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-06-07T21:44:03.507 回答
7

我有最简单的 3 行 css 会让你大吃一惊，你会想“为什么我一开始没有想到这个”。在您希望垂直居中放置的元素上使用它，并且父容器只需添加 100% 的高度。

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

位置可以是相对的、绝对的或固定的。

于 2017-08-22T22:43:05.903 回答
7

2012 年，接受的答案是正确/最佳选择。

快进 8 年，每个主流浏览器（IE10+）都支持 flex box ：

display: flex;
align-items: center;
flex-direction: column;  /* To also center horizontally, change to `rows` or remove */

注意：如果您关心 IE10，则需要-ms-根据我上面的超链接包含前缀版本。

于 2020-03-29T02:13:32.433 回答
4

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>
于 2012-06-07T20:25:26.400 回答
2

有一个跨（桌面）浏览器解决方案可以使用 CSS2 + CSS3 完成此操作，无需任何 Javascript。

工作于

  • IE5+
  • Gecko（Mozilla、Firefox、Netscape 7）
  • 歌剧 7+
  • 征服者 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-Hacks 的影响，我建议您使用条件注释并使用浏览器特定代码创建单独的 CSS。

未知高度的垂直居中如何工作以及为什么：详细说明

此处使用display: tableand or or display: table-celland or 绝对定位的其他解决方案。

于 2012-06-07T21:11:35.783 回答
1 
<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。

于 2012-06-07T20:30:27.973 回答
1

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

于 2012-06-07T20:33:19.043 回答
0

我用桌子做所有事情。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>
于 2014-02-05T20:53:23.957 回答
-2

从我的角度来看，div在这种情况下是不合适的选择。我的建议是选择它table的vertical-align风格td。

于 2012-06-07T20:26:03.847 回答