CSS：将文本放置在页面中间答案

【问题标题】：CSS: Position text in the middle of the pageCSS：将文本放置在页面中间
【发布时间】：2011-12-18 09:35:06
【问题描述】：

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

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

【问题讨论】：

你的意思是垂直居中和水平居中？
页面上还有其他内容吗？
不。只是一张背景图片。

【解决方案1】：

试试这个 CSS：

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

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

【讨论】：

然后你用“
Hello world！
我是邪恶的！
”替换html ...然后疯狂返回；）所以我猜Javascript是唯一的办法？
@proxygear：在这种情况下我会使用vertical-align hack（<div> 包装，空的inline-block 和100% 高度::before，inline-block<h1>，@ 987654330@ 都在）

【解决方案2】：

即使您已接受答案，我仍想发布此方法。我使用 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。这种方法的美妙之处在于它适用于多行h1s。

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

【讨论】：

哦，酷！我一直想进入 jQuery；我可能应该学习它：P
如果你正在使用这个定位功能，你也应该把它附加到窗口调整大小事件中。用于移动垂直/水平切换，也可以避免用户调整浏览器窗口大小时的尴尬结果；）

【解决方案3】：

这是一个使用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

【讨论】：

Hello world！我是邪恶的！

Hello world！
我是邪恶的！