天地左右中央配置 [ codepen: css ]

ちょいちょい忘れるので備忘録的に。

ある特定要素を 天地左右中央 配置する際によく利用するCSSテクニック。

ちょくちょく使うことがあるが、 sass や stylus で mixin 化しちゃうことが増えたのでコード自体を忘れることが増えている。。(汗)

HTMLを↓こうして、

<div class="wrapper">
    <div class="inner">hogehoge</div>
</div>

CSSを↓こうするだけ。

.wrapper {
    left: 50%;
    margin-right: -50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

↓ Codepenでの実装例