cssのpositionタグは指定された要素の配置方法を調整出来るプロパティですが、その中でも使用頻度が高いけどどう書くんだっけ?となる事が多いabsoluteの中央寄せについてです。
<div class="sampleBox">
<img src="https://hira-s.net/blog/wp-content/uploads/2019/12/8782.png" alt="">
</div>
.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;
}
理屈としては、まずtopとleftで起点の左上から50%ずつの位置に移動させ、transformで画像自体の大きさの50%分を戻すというイメージです。
下記のサンプルをご覧ください。
上の状態から transform だけ抜いた場合です。少し右下方向にずれていると思いますが、画像の左橋が灰色のボックスの中央線になっています。
デモはここからtransformで画像自体の半分の大きさ分左上方向に移動させている状態でレスポンシブかつ、上下左右に中央寄せになっている状態です。
これらの応用で上下左右だけでなく、縦方向、横方向のみの中央寄せや入力する%を調整すれば色々と応用が利きます。
absoluteはそのままだと起点がヘッダーの左上になってしまいますので親要素を1つ作ってposition: relative;にするのを忘れないでください。
WEBディレクター、デザイナー、フロントエンドエンジニア、投資家、会社オーナー
2007年に同志と起業、2009年に法人化、2018年にHira's.netを設立。
WEBデザイン、コーディング、ディレクター等WEB制作全般に幅広く携わっています。