「WBS」「ガイアの夜明け」「がっちりマンデー!!」「カンブリア宮殿」などのテレビ番組で気になったニュースからお金と仕事を考えて豊かな生活を目指します。

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

2016年1月23日

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

  • ブログランキングへ
  • にほんブログ村

カテゴリー:HTML / CSS
タグ:

コメントを残す

プロフィール

嫁と4歳の息子の3人暮らしの30代後半のサラリーマンです。
詳しいプロフィール

カレンダー

2017年2月
« 1月    
 12345
6789101112
13141516171819
20212223242526
2728  
  • ブログランキングへ
  • にほんブログ村

TOPに戻る