如何在动态高度div中垂直居中放置文本？
无论div元素有多高，我如何在h1标签内垂直居中放置h1标签？即如果用户更改他的浏览器高度，我希望h1根据新的高度在中心垂直对齐。
谢谢。
问题答案：
我遇到过的最好的解决方案是利用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;
}
经过测试
Windows XP Professional 2002版Service Pack 3
- Internet Explorer 8.0.6001.18702
- 歌剧11.62
- Firefox 3.6.16
- Safari 5.1.2
- 谷歌浏览器18.0.1025.168 m
Windows 7家庭版Service Pack 1
- Internet Explorer 9.0.8112.164211C
- 歌剧11.62
- Firefox 12.0
- Safari 5.1.4
- 谷歌浏览器18.0.1025.168 m
Linux Ubuntu 12.04
- Firefox 12.0
- Chromium 18.0.1025.151（Developer Build 130497 Linux）
-
问题内容： 是否可以将div垂直居中放置在％高度div中？ 问题答案： 在这里以及在整个Internet上，已经被要求足够多次了。快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。有关示例，请参见此页面。（请注意，这不适用于IE6。）
-
问题内容： 我正在使用的div是父div高度的100％。 div仅包含一行文本。 div不能具有固定的高度。 所以我的问题是。 如何垂直对齐文本行？ 我试过使用： 如果很重要，则div是绝对定位的。 当前的CSS 问题答案： 这个答案不再是最好的答案…请参阅下面的flexbox答案！ 为了使其完全居中（如大卫的回答中所述），您需要添加负的上边距。如果您知道（或强制）只有一行文本，则可以使用： 例如
-
问题内容： 是否可以将 div 垂直居中于％height div中 ？ 问题答案： 在这里以及整个Internet上，已经被要求足够多次了。 快速搜索将为您带来大量结果。无论如何，我这样做的首选方式是使用和。
-
问题内容： 我有这样的标记： div高于img： 我需要将图像放置在div的中间（在其上下具有相同的空白）。 我试过了，它不起作用： 问题答案： 如果您的图像纯粹是装饰性的，那么将其用作背景图像可能是一种更语义化的解决方案。然后您可以指定背景的位置 如果它不是装饰性的并且构成有价值的信息，则img标签是合理的。在这种情况下，您需要使用以下属性设置包含div的样式：
-
问题内容： 我想将添加到另一个div内的div居中。 这是我当前正在使用的CSS。 如您所见，我现在使用的方法取决于width和height的值。如果width / height发生变化，我将不得不修改and值。是否有任何通用解决方案可用于始终将居中对齐它的大小？ 我发现使用可以将innerDiv水平分配到中间，但是垂直分配中间呢？ 问题答案： tl; dr 垂直对齐中间作品，但是您将不得不在父元
-
我试图垂直（和水平）中心div（高度和宽度未知）在引导列。我可以水平中心的div设置文本对齐到中心。然而，我正在努力垂直居中的div。下面是我的代码片段： 提前感谢！