【CSS】position:absolute;での縦横中央配置

position:absolute;を指定すると高さがなくなり、margin:0 auto;でも中央配置出来なくて困った!なんて事ないですか?
いくつかやり方はありますが、自分がよく使うやり方をご紹介します。

横方向(水平)での中央配置

margin:0 auto;とleft:0;とright:0;を設定するのがポイントです。
幅を持っている必要がある為、img要素などのインライン要素はブロック要素に変更して下さい。

.box {
	margin:0 auto;
	position:absolute;
	left:0;
	right:0;
}

テキストなど可変の高さの要素に対して非常に役立ちます。top:50%;で基準のブロックの縦位置50%にして、更にabsoluteで配置する要素の高さの半分を戻します。対応ブラウザは全てのモダンブラウザとIE9〜です。必要があれば各種ベンダープレフィックスを付けて下さい。

.box {
	top:50%;
	-webkit-transform:translateY(-50%);
	transform:translateY(-50%);
}

このような配置の仕方を覚えておけば、いろいろな場面で役に立ちます。
自分のように、横(水平)中央配置をmargin:0 auto;ではなく、translateXで配置してしまっても大丈夫ですが、ソースが複雑になるのと、解除が面倒なので横配置はmarginにしてます。

その他にdisplay:flex;で対応する事もできますが、こちらはIE10以降となっているので使いにくい場面もあるのが現状です。
ただ、いろいろなやり方を覚えておくと役に立ちます。