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

【问题标题】：how to center text vertically without additional html如何在没有额外html的情况下垂直居中文本
【发布时间】：2014-08-15 06:49:45
【问题描述】：

我想知道有没有办法在不使用容器元素的情况下使文本垂直居中。反应灵敏的东西。

编辑我知道的唯一值是 h3 元素的高度，仅此而已，内容将出现在一些下方

等等

CSS

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

HTML

<h3>TEST</h3>

这是我想要实现的示例 codepen test

【问题讨论】：

您的示例没有显示它垂直居中...填充从顶部推动。您可以使用绝对位置和相对位置以及顶部进行调查：50%
据我了解，您想为您的文本指定方向，不是吗？？保持居中，不是吗？？
@BigChris - 是的，填充是错觉，绝对位置的问题是内容跟随它
@MickyScion - 我想将
定义为带边框的块元素，然后将文本在元素内部居中而不需要额外的 div

标签： html css centering

【解决方案1】：

Line-height 是一个美丽的东西，特别是如果它只是文本。如果你想响应：

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

【讨论】：

谢谢，这肯定是最简单的解决方案，我很好奇为什么我现在没有使用 :)
这就是我如此喜欢这个网站的原因。我不知道不知道您可以根据视口调整大小。仍然将您限制在一行。哇。我现在有很多模板需要更新。
是的，视口大小现在是我的首选。如果可以的话，我尽量不使用媒体查询：P

【解决方案2】：

没有简单的方法可以做到这一点。这些年来，我想出了一些技巧。

您有 80 像素的内边距和 140 像素的高度，组合高度为 240 像素。如果你知道文本不会超过一行，你可以使用line-height。

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

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

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

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

【讨论】：

是的，这不是很容易，但我遇到的问题是网站是响应式的并且有所有断点，以及各种
元素我正在寻找需要最少数量的东西关于行高、填充等的配置

【解决方案3】：

添加到您的代码中：

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

您需要调整内边距。应该可以的。

【讨论】：

【解决方案4】：

本文提供了 6 种不同的方法及其相关的优缺点；它比我在这里解释得更好。此处作为答案提供的解决方案很好，但本文确实涵盖了小众案例，并允许您选择适合您需求的最佳方法。

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

【讨论】：

抱歉，我已经阅读了这篇文章，这些都使用了一个额外的元素来使文本居中，我正在寻找一个不需要额外元素的解决方案

【解决方案5】：

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

你可以这样做：

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

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

或者...

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

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

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

edit^2 - 找出 Jason 看到的问题。如果您使用 html5 文档类型，那么，是的，您必须在正文样式中包含 html 元素。这也使得滚动条重新出现在相对位置解决方案中。所以这很有趣。为了避免将来感到沮丧，我将保留此内容，但我会查看 Jason 解决方案中提供的链接。

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

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

【讨论】：

这两种方法都不能在 Chrome 中正常工作。将“body {”更改为“html, body {”以产生有效的解决方案。此外，您可能需要添加边距：0；和填充：0；到正文以删除添加滚动条的多余填充...
我觉得这太复杂了，我使用的布局非常复杂，

定义为带边框的块元素，然后将文本在元素内部居中而不需要额外的 div

元素我正在寻找需要最少数量的东西关于行高、填充等的配置