CSS：将文本定位在页面中央

Question

我想将一个<h1>标签放在任何用户页面的中间。我已经在互联网上搜索了，它们都将其放在错误的位置。谢谢！

更新：我的意思是垂直和水平居中！确切地说是在正中央！
另外：页面上没有其他内容。

- snarkyazoid

---

您是指垂直和水平居中吗？ - Ry-

页面上还有其他内容吗？ - Purag

不是。只是一个背景图片。 - snarkyazoid

Answer 1

如果你知道高度，你可以使用position: absolute 和 top-margin-top 来垂直对齐某些元素，而使用line-height 可以使单行文本在中间具有已知的高度：

h1 {
    left: 0;
    line-height: 200px;
    margin-top: -100px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
}

<h1>Hello, world!</h1>

- Ry-

---

然后你用"<h1>Hello world!<br/>I'm evil!</h1>"替换html...疯狂回归;)所以我猜Javascript是唯一的方法？ - ProxyGear

@proxygear：在这种情况下，我会使用vertical-align技巧（<div>包装器，空的inline-block和100％高度的::before，inline-block <h1>，并在两者上都使用vertical-align: middle;）。 - Ry-

Answer 2

以下是使用 display:flex 方法：

.container {
  height: 100%;
  width: 100%;
  display: flex;
  position: fixed;
  align-items: center;
  justify-content: center;
}

<div class="container">
  <div>centered text!</div>
</div>

查看位于Codepen上的示例
检查浏览器兼容性

- Claytronicon

Answer 3

虽然您已经接受了一个答案，但我想发布这种方法。我使用jQuery将其垂直居中，而不是CSS（尽管这两种方法都可行）。 这里是一个小例子，我还是会在这里发布代码。 HTML：

<h1>Hello world!</h1>

Javascript（jQuery）：

$(document).ready(function(){
  $('h1').css({ 'width':'100%', 'text-align':'center' });
  var h1 = $('h1').height();
  var h = h1/2;
  var w1 = $(window).height();
  var w = w1/2;
  var m = w - h
  $('h1').css("margin-top",m + "px")
});

这个方法获取了视口的高度，将其除以2，减去 h1 高度的一半，并将该数字设置为 h1 的 margin-top。这种方法的优点是可用于多行的 h1。 编辑：我修改了它，使得在每次调整窗口大小时都能居中显示。

- Purag

---

哦，太酷了！我一直想学习jQuery，我应该学一下 :P - snarkyazoid

如果您正在使用此定位功能，则还应将其附加到窗口调整大小事件。对于移动垂直/水平切换，也可以避免用户仅调整浏览器窗口大小时出现尴尬的结果;) - ProxyGear