IE8以降で実装可能な、ボックスを上下左右中央に配置する方法

|

今まで、ボックス要素を上下左右中央する場合、トリッキーな方法を用いて実現させていました。

でも、IE8以降から、次のような、簡単なCSSで実装可能になったようです。

(X)HTMLコード

<div class="box"></div>

CSSコード

.box {
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    width:500px;
    height:500px;
}

どうして、このような書き方で実装可能なのかというのは、以下のブログに詳しく書いてあります。

私は勝手に、「top」と「bottom」、「left」と「right」は同時指定できないと思っていたのですが、勘違いでしたね。もっとしっかり仕様書を読まなければ...。

ということは、次のように、topなどで位置を決めることで、widthやheightを固定しない方法もできるのですね。

CSSコード

.box {
    position:absolute;
    top:20%;
    left:20%;
    right:20%;
    bottom:20%;
}

この場合であれば、「margin:auto;」の指定や、width、heightの指定は不要になります。

CSSの小技に関する記事(53)

参考サイト

お勧めCSS教本

Powered by Movable Type 4.21-ja

最近のブログ記事