CSS：在页面中间放置文本

Question

我想在任何用户页面的中间放置一个

<h1>

。我一直在网上搜索，他们都把它放在了错误的地方。谢谢！

更新：我的意思是垂直和水平！在正中间！
另外：页面上没有nothing。

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>

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 上查看
检查浏览器兼容性

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")
});

这取视口的高度，将其除以二，减去 h1 高度的一半，并将该数字设置为 h1 的

margin-top

。这种方法的美妙之处在于它适用于多行

h1

s。

编辑：我修改了它，以便每次调整窗口大小时它都居中。