Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

縦横中央揃えも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

どうやら、一部の置換インライン要素しか子要素のサイズ可変には対応していないようです。
具体的には、imgiframeタグなどです。それ以外の要素は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;
    }
}
sawadays0118
制作会社でマークアップエンジニアとして勤務後、フリーランスのフロントエンドエンジニアをしています。(`・ω・´) 文系出身なのでプログラムは苦手ですが、効率化は大好きです。 HTML,CSS,JS(jQuery),Sass,Slim,Gulpなどフロントエンド関連技術のTipsを中心に発信していく予定。 コーディング歴8年、メインエディタはSublime text。好きな食べ物は鶏の唐揚げ。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした