Question

我想知道有没有一种方法可以在不使用容器元素的情况下垂直居中文本。响应的东西。

修改我唯一知道的值是h3元素的高度，仅此而已，内容将显示在某些内容下

等

CSS

h3 {
 height: 140px;
 padding-top: 80px;
 min-height: inherit;
 border: 1px solid black;
 text-align: center;
}

HTML

<h3>TEST</h3>

这是我想要实现的一个例子 codepen test

Answer 1

线高是一件美丽的事情，特别是如果只是文字。如果你想要回应：

h3 {
  background-color: transparent;
  height: 40vh;
  line-height: 40vh;
  min-height: inherit;
  border: 1px solid black;
  text-align: center;
}

Answer 2

没有简单的方法可以做到这一点。多年来，我提出了几种技术。

填充高度为80px，高度为140px，组合高度为240px。如果您知道文字不会超过一行，则可以使用line-height。

h3{
    line-height:240px;
    ...
}

如果你知道文字的高度，另一种方法是使用填充。

h3{
    font-size: 20px;
    line-height:20px;
    padding:110px 0;/* (240-20)/2 */
    ...
}

注意：我不喜欢display: table-cell黑客并且还不需要它。如果您要告诉浏览器将元素视为表格，为什么要远离基于表格的布局？

Answer 3

添加到您的代码：

display: table-cell;
vertical-align: middle;

您需要调整填充。这应该有用。

Answer 4

无论如何，你将拥有一个包含元素。只是身体可能是容器。

你可以这样做：

body {
    height:100%; 
    display: table;
    margin: 0px;
    padding: 0px;
}

h3 {
    display: table-cell;
    vertical-align: middle;
}

... OR

body {
    height:100%; 
    margin: 0px;
    padding: 0px;
}

h3 {
    position: relative;
    top: 50%;
}

编辑 - 删除宽度特定样式，因为它与解决方案无关。感谢Jason将margin / padding设置为0px以删除丑陋的滚动条。杰森还指出，这个解决方案不适用于Chrome，除非样式中的“body”元素更改为“html，body”，但我无法使用Chrome版本35.0复制此问题...为了更好的衡量我也在Safari和Firefox中打开了一个测试页面，他们也按预期工作了。

编辑^ 2 - 想出杰森看到的问题。如果您使用html5 doctype，那么，是的，您将必须包含带有正文样式的html元素。这也使滚动条重新出现在相对位置解决方案中。这很有趣。为了节省将来的挫折感，我会把它留下来，但我会查看Jason解决方案中提供的链接。

http://phrogz.net/CSS/vertical-align/

How can I vertically center text in a dynamically height div?

Answer 5

本文提供了6种不同的方法及其相关的优缺点;它解释得比我在这里好得多。这里提供的解决方案很好，但文章真的涵盖了利基案例，并允许您选择最适合您需求的方法。

http://www.vanseodesign.com/css/vertical-centering/

如何在没有额外html的情况下垂直居中文本

5 个答案: