block要素をcssだけで簡単に上下中央揃えにする

背景のブロックに画像を入れて、その上に上下中央揃えで何かしら要素を置くのに一番いいと思う方法。

"display: table-cell" も使いませんし、"top: 50%; left: 50%" として margin にマイナスの値を設定するということでもないのが便利です。

sample.html

<div class="wrapper">
	<img class="bg" src="/img/dummy.jpg" alt="">
	<ul class="menu">
		<li><a href="#"><img src="menu1.png" alt="menu1">
		<li><a href="#"><img src="menu2.png" alt="menu2">
		<li><a href="#"><img src="menu3.png" alt="menu3">
		<li><a href="#"><img src="menu4.png" alt="menu4">
	</ul>
</div>

sample.css

.wrapper {
	position: relative;
}
.bg {
	width: 100%; /* 比率を変えずに全画面に置く */
	height: auto;
}
.menu {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin:auto;
	width: 100px; /* 任意のサイズ */
	height: 100px; /* 任意のサイズ */
}

これだけで上下中央揃いになります。

縦長のページ構成で、各ブロックに背景画像を設定する様な最近はやりのレイアウトで利用できます。