web-dev-qa-db-ja.com

CSS：ページの中央にテキストを配置

<h1>をユーザーのページの中央に配置したいと思います。私はインターネットを検索してきましたが、彼らは皆それを間違った場所に置いています。ありがとうございました！

更新：垂直と水平を意味します！まさに真ん中に！
ALSO：nothing elseがページにあります。

csstextpositioning
29
snarkyazoid

このCSSを試してください：

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

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

42
Ry-

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で表示
ブラウザの互換性を確認

28
claytronicon

回答を受け入れたとしても、この方法を投稿したいと思います。 cssではなくjQueryを使用して垂直方向に中央揃えします（ただし、これらの方法は両方とも機能します）。 ここ はフィドルです。とにかくここにコードを投稿します。

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で機能することです。

EDIT：ウィンドウのサイズが変更されるたびに中央にくるように変更しました。

5
Purag