【Sass】IE8以上対応の縦横中央揃え【Mixin】

縦横中央揃えもMixinで簡単指定

IE8以上対応のpositionを利用した縦横中央揃えです。子要素のサイズ可変(*1)、レスポンシブにも対応してます。
内容としては、バシャログさんで紹介されているこちらの方法をMixinに落とし込んでいるだけです。
http://c-brains.jp/blog/wsg/14/08/06-100100.php

*1 追記を参照してください。

Howto

Mixin

_mixin.scss

// * Vartical & Horizontal Centering (IE8 and above. use position.)
@mixin vh-center($axis:xy) {
    position: relative;
    & > * {
        position: absolute;
        @if $axis == x {
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
        } @elseif $axis == y {
            top: 0;
            bottom: 0;
            margin-top: auto;
            margin-bottom: auto;
        } @else {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    }
}

こちらのmixinを入れてください。

HTML

index.html

<div class="vhCenter"><img src="http://placeimg.com/200/200/any" alt=""></div>

Scss

縦横センタリングの場合

test.scss

.vhCenter {
    @include vh-center;
    width: 600px;
    height: 600px;
    background: #ccc;
}

横のみセンタリングの場合

test.scss

.vhCenter {
    @include vh-center(x);
    width: 600px;
    height: 600px;
    background: #ccc;
}

縦のみセンタリングの場合

test.scss

.vhCenter {
    @include vh-center(y);
    width: 600px;
    height: 600px;
    background: #ccc;
}

センタリングしたい要素の親要素にvh-centerを@includeします。
デフォルトは縦横センタリングですが、$axisで軸を指定することで、
縦横どちらかのセンタリングも可能です。
親要素にはwidthとheightも指定してください。（レスポンシブの場合はwidth: auto;もしくは%で）

Output CSS

縦横センタリングの場合

test.css

.vhCenter { position: relative; width: 600px; height: 600px; background: #ccc; }
.vhCenter > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

横のみセンタリングの場合

test.css

.vhCenter { position: relative; width: 600px; height: 600px; background: #ccc; }
.vhCenter > * { position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; }

縦のみセンタリングの場合

test.css

.vhCenter { position: relative; width: 600px; height: 600px; background: #ccc; }
.vhCenter > * { position: absolute; top: 0; bottom: 0; margin-top: auto; margin-bottom: auto; }

Remarks

IE8以上対応で、子要素のサイズ可変に対応した縦横中央揃えの実現方法としては、

• display: table;,display: table-cell;
• display: inline-block;内に高さを持った空要素を配置

などの方法がありますが、こちらのほうがデバイス対応を考えた際に柔軟なレイアウトが可能なのでオススメです。

Postscript 2014/12/28

どうやら、一部の置換インライン要素しか子要素のサイズ可変には対応していないようです。
具体的には、img、iframeタグなどです。それ以外の要素はwidth,heightを指定しないと中央揃えになりません。
デバイス対応を考慮しつつ、あらゆるタグで子要素のサイズ可変に対応させたい場合、前述のこちらの方法を利用したほうが良いと思います。

• display: inline-block;内に高さを持った空要素を配置

こちらもmixinにしてみましたので、参考にしてみてください。

Mixin

_mixin.scss

// * Vartical & Horizontal Centering (IE8 and above. use :before.)
@mixin vh-center {
    text-align: center;
    &:before {
        content: "";
        display: inline-block;
        vertical-align: middle;
        height: 100%;
    }
    & > * {
        display: inline-block;
        vertical-align: middle;
    }
}