flexboxを用いた中央寄せ

ドメインが失効してしまったのでこちらで書きます＼(^o^)／

天地中央寄せでレイアウトする箇所が出てきたとき、

.parent {
    position: relative;
    width: 100%;
    height: 400px;
}

.child {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}

ってやるのが（IE9以降は）一番簡単だと思っていたのですが、
flexboxを用いるともっと簡単に中央寄せできることを知りました。

flexboxによる中央寄せ

.parent {
    display: flex;
    width: 100%;
    height: 400px;
}

.child {
    margin: auto;
    width: 300px;
    height: 200px;
}

ブラウザ対応状況

(caniuse参照)

IEは10以降からになってしまいますが、IEとAndroidの状況によっては使えるかもしれませんね。
（なんだかんだでdisplay:table最強伝説となってしまいますが）

参照元

Smashing Magazineからのツイートから拝借

2. Perfect vertical alignment: .parent { display:flex; } .child { margin: auto; }

— Smashing Magazine (@smashingmag) 2014, 11月 28

また、IE10のハック的なものもツイートされていました

5. .ie10 { flex-basis: 0; }, old flexbox in IE10. It enables a flex-child to expand, which it normally should do with ‘auto’. via @_munter_

— Smashing Magazine (@smashingmag) 2014, 11月 28