本当に3行でできた！htmlの要素を縦中央に揃えるtranslateY

こんばんは、人よりコードに関わる時間が多いのが悩みのウニです。

htmlで要素を縦中央に表示させる方法は様々ですが、
可変する高さの中央へ要素を配置する時にCSS3を利用すると本当に便利でした！

背景動画の可変対応

今回背景動画を利用したページ作成する案件がありました。
その時てこずったのが子要素を親要素の高さ中央に揃えることでした。

よく使ってる縦中央ぞろえのCSS記述例

.example {
	position: relative;
}
.example .aBox {
	position: absolute;
	top: 50%;
	margin-top: -○○px; /* 子要素の高さの半分をマイナスで指定 */ 
}

親要素の高さが決まっていればこれで行けますが、
今回の背景動画は高さが可変だったのでブラウザの幅によって中央になりません。

これは便利！CSS3でシンプルに対応

そんなわけで、対応を探していると、コリスさんの記事を発見！
引用：[CSS]たった3行のスタイルシートで高さ不明の要素に対して天地中央に配置するテクニック（IE9にも対応）

CSS3のtransform: translateYを利用することで、高さが決まってない親要素の中央に配置できます。
「きた！縦きた！これで勝つる！」

早速やってみると……うまくいかない！

サンプルとソースが違うので確認してみると、
position: absolute;を指定することでうまくいきました。

html

</p> <div class="example"> <p class="aBox">中央に配置</p> <div class="videoBox">背景動画</div> </p></div> <p>

css

.example {
	position: relative;
}
.example .aBox {
	position: absolute; /* ←ここを変更 */
	top: 50%;
	-webkit-transform: translateY(-50%); /* Safari */
	-ms-transform: translateY(-50%); /* IE 9 */
	transform: translateY(-50%);
}
.example videoBox {
	position: absolute;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	width: 100%;
	height: auto;
}

案件によっては下位のブラウザ対応が必要な時もあると思いますが、
IE9以上での対応ならCSS3を利用すると格段に楽になりますね。