【CSS】position:absoluteで中央に配置する方法

cssのpositionタグは指定された要素の配置方法を調整出来るプロパティですが、その中でも使用頻度が高いけどどう書くんだっけ?となる事が多いabsoluteの中央寄せについてです。

サンプル

HTML

<div class="sampleBox">
    <img src="https://hira-s.net/blog/wp-content/uploads/2019/12/8782.png" alt="">
</div>

CSS

.sampleBox {
	position:relative;
	
	/* サンプル用記述 */
	width:100%;
	height:300px;
	margin-bottom: 20px;
}

.sampleBox img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	
	/* サンプル用記述 */
	width: 80px;
	height: auto;
	z-index: 10/* 他の重なりに合わせて調整 */;
}

デモ

理屈としては、まずtopとleftで起点の左上から50%ずつの位置に移動させ、transformで画像自体の大きさの50%分を戻すというイメージです。
下記のサンプルをご覧ください。

transformtが無い場合

上の状態から transform だけ抜いた場合です。少し右下方向にずれていると思いますが、画像の左橋が灰色のボックスの中央線になっています。
デモはここからtransformで画像自体の半分の大きさ分左上方向に移動させている状態でレスポンシブかつ、上下左右に中央寄せになっている状態です。

これらの応用で上下左右だけでなく、縦方向、横方向のみの中央寄せや入力する%を調整すれば色々と応用が利きます。

左右方向だけのパターン

上下方向だけのパターン

縦30%、横80%の配置

注意点

absoluteはそのままだと起点がヘッダーの左上になってしまいますので親要素を1つ作ってposition: relative;にするのを忘れないでください。