要素を上下中央に配置する

要素を親要素の上下中央位置に配置する方法のメモ。

サンプルコード

スマホサイトなどでよくある、リスト表示の右側にアイコンを表示するレイアウトを実装してみます。

HTML

<ul class="list">
	<li><a href="">リスト</a></li>
	<li><a href="">リスト</a></li>
	<li><a href="">リスト</a></li>
</ul>

CSS

.list a {
	display: block;
	position: relative;
	padding: 10px;
	border-bottom: #333333 1px solid;
	text-decoration: none;
}
.list a:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	background: #ff0000;

	/* 配置のためのスタイル */
	position: absolute;
	top: 50%;
	right: 10px;
	margin-top: -5px;
}

上下中央配置のデモページ
アイコンは疑似要素で配置していて、positionのtopを50%にして、要素の高さ分だけmargin-topで上へ移動させています。
これでも問題はないのですが、この場合要素の高さが変更されるとmargin-topの値も変更する必要があります。

サンプルコード2

配置のためのスタイルだけ変更して、要素の高さが変わっても上下中央になる方法を2つ紹介します。

CSS

.list a {
	display: block;
	position: relative;
	padding: 10px;
	border-bottom: #333333 1px solid;
	text-decoration: none;
}
.list a:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	background: #ff0000;

	/* 配置のためのスタイル */
	position: absolute;
	top: 50%;
	right: 10px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}

上下中央配置のデモページ2
margin-topの代わりにtranslateYを使用して対応しました。
translateYだとmargin-topと違い自身の高さの半分だけ上へ移動できるので、高さが変わっても値を変更する必要がありません。
　

CSS

.list a {
	display: block;
	position: relative;
	padding: 10px;
	border-bottom: #333333 1px solid;
	text-decoration: none;
}
.list a:after {
	content: '';
	display: block;
	width: 10px;
	height: 10px;
	background: #ff0000;

	/* 配置のためのスタイル */
	position: absolute;
	top: 0;
	bottom: 0;
	right: 10px;
	margin-top: auto;
	margin-bottom: auto;
}

上下中央配置のデモページ3
topとbottomに0を指定することで、relativeを指定した親要素の高さの範囲が配置できるエリアになります。
配置エリアを広げたうえでmargin-topとmargin-bottomにautoを指定することで、配置エリアの上下中央に配置することができます。