Question

我想将<h1>放在任何用户页面的中间位置。我一直在搜索互联网，他们都把它放在不正确的地方。谢谢！

更新：我的意思是纵向和横向！在确切的中间！
另外：页面上还有 nothing 。

Answer 1

试试这个CSS：

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

jsFiddle：http://jsfiddle.net/wprw3/

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>

View on Codepen
Check Browser Compatability

Answer 3

即使您已接受答案，我也想发布此方法。我使用jQuery垂直居中而不是css（虽然这两种方法都有效）。 Here是一个小提琴，我会在这里发布代码。

<强> 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。

编辑：我对其进行了修改，以便每次调整窗口大小时都将其居中。

CSS：将文本放在页面中间

3 个答案: