IT女子のお気に入りフォルダ

管理人の備忘録と実践を兼ねた(出来るだけ)役に立つ情報を配信するブログです。

cssだけでブロック要素を上下左右中央揃えにする

左右中央揃えの方法はご存知の方も多く、
インライン要素の場合はtext-align:center;
ブロック要素の場合はmargin:0 auto;です。

では、上下中央揃えはどうでしょうか?

vertical-align:middle;を指定すると上下に中央寄せすることができます。
が、vertical-alignが効くのは「インライン要素」と「テーブルセル」だけです。

じゃあ、ブロック要素を上下中央に揃えたい場合はどうすればいいの?

という対応策で、インライン要素には高さを指定できないので「テーブルセル」を使う方法がよく紹介されています。
つまり、display:teble-cell;を使う方法です。

たしかにシンプルでわかりやすいですが、デザインをマークアップするうえで、上下中央に揃えるためだけにテーブルセル化するのも抵抗があることがあります。
ブロック要素はブロック要素として上下中央に揃えたいのです。

ブロック要素を上下中央に揃える

中央寄せにしたい要素にposition:absolute;を指定して、上下からの距離を0に指定します。(top:0; bottom:0;
そして、margin:auto;を指定すれば出来上がりです。

<div class="wrap">
    <div class="block-item">ブロック要素です。</div>
</div>
.wrap {
    background-color: #ccc;
    width: 500px;
    height: 500px;
    position: relative;
}
.block-item {
    background-color: #666;
    width: 150px;
    height: 150px;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
}

ブロック要素を上下左右中央に揃える

先ほどの上下中央揃えを踏まえて、上下左右中央揃えは、中央寄せにしたい要素にposition:absolute;を指定して上下左右からの距離を0に指定します。(top:0; right:0; bottom:0; left:0;)そして、やはり最後にmargin:auto;を指定すれば出来上がりです。

<div class="wrap">
    <div class="block-item">ブロック要素です。</div>
</div>
.wrap {
    background-color: #ccc;
    width: 500px;
    height: 500px;
    position: relative;
}
.block-item {
    background-color: #666;
    width: 150px;
    height: 150px;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

上下左右の距離は必ず0でなければならないわけではありません。重要なのはこれらのpositionの指定とmargin:auto;の組み合わせです。
このような挙動になる理由は、以下を参考にしてください。

参考サイト

position: absolute; の指定で要素が上下左右中央配置になる理由

1週間でLPICの基礎が学べる本 第2版

体系的に学ぶ 安全なWebアプリケーションの作り方[リフロー版] 脆弱性が生まれる原理と対策の実践

スッキリわかる SQL 入門 ドリル215問付き!

改訂 FuelPHP入門

はじめてのフレームワークとしてのFuelPHP 改訂版