[HTML] 縦方向の中央に配置する方法

HTML / CSS

縦方向の中央に配置する時に今までは「table-cell」を使用していましたけ、もっと簡単な方法を書かれている方がいらっしゃいましたので、今後のために記録しておきます。

  • IE8以前は不可
  • IE9は可能
  • IE10は可能
  • IE11は可能
  • Chromeは可能
  • Firefoxは可能
  • Safariは可能
  • Operaは可能

[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック(IE9にも対応)

DEMO

Sample Text

html

    <div class="demo">
        <p>Sample Text</p>
    </div>

css

    .demo {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    
    .demo p {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
    }

「position」は最近まで、あまり好きなれなかったのですが、このような使い方が出来るのなら、今後はもっと積極的に利用していきたいと思います。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする