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

HTML / CSS

昨日書いた「[HTML] 要素の高さが不明でも縦方向の中央に配置する方法」以外にも中央に置く方法が書かれていたサイトを発見しました。
それも、IE8にも対応しているそうです。

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

【CSS】要素を上下左右に中央寄せする色々な方法

DEMO

Sample text

html

    <div class="sample_box">
        <div class="sample">Sample text</div>
    </div>

css

    .sample_box{
        width: 60%;
        height: 200px;
        background: #fafafa;
        border: 1px solid #ccc;
        position: relative;
    }
    .sample{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 100px;
        height: 100px;
        background: #eee;
    }

IE8にも対応しているところが素敵ですよね。
応用も色々と出来そうですので、昨日のコードと共に活用していきたいと思います。

シェアする

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

フォローする