【CSS】position: absolute;で配置した要素を中央寄せする方法

CSS

横方向に中央寄せ

.box {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

↓これでも同じ結果になります。

.box {
	position: absolute;
	right: 50%;
	transform: translateX(50%);
}

縦方向に中央寄せ

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

↓これでも同じ結果になります。

.box {
	position: absolute;
	bottom: 50%;
	transform: translateY(50%);
}

縦横中央寄せ

.box {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

↓これでも同じ結果になります。

.box {
	position: absolute;
	bottom: 50%;
	right: 50%;
	transform: translate(50%, 50%);
}

仕組みの解説

position: absolute;は始点の位置を指定するので、位置を50%と指定しても始点が中央になるだけで、要素自体は中央に寄ってくれません。

要素自体を中央に持ってくるには、要素の幅・高さの半分だけ逆方向に戻す必要があります。

これをtransform: translate();で指定しています。