CSS | 画像を親要素内の縦横中央に配置する方法
CSSで画像をそのサイズに関係なく親要素内の縦横中央に配置する簡単な指定方法です。
紹介しているのはdisplay: flexとalign-items、justify-contentを使う方法、position: absoluteを使う方法の二通りになります。
いずれの方法も、画像が親要素のサイズより大きくなっても親要素からはみ出さず、画像の中央が親要素の中央にくるようになっています。
display: flexで画像を縦横中央に配置する
display: flexを利用して画像を縦横中央に配置する動作サンプルとサンプルコードです。
See the Pen CSS | Transparent gradient in the image by yochans (@yochans) on CodePen.
HTMLには画像を内包する親要素「container」をdivタグで作成、画像はimgタグにて記述しています。
<div class="container">
<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg">
</div>縦の中央揃え「align-items: center」と横の中央揃え「justify-content: center」は「display: flex」を指定することで有効化しています。
親要素に「overflow: hidden」を指定しておくことで親要素より画像サイズが大きくなってもはみ出さないようにしています。
.container {
width: 100%;
height: 200px;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.container img {
width: 250px;
}position: absoluteで画像を縦横中央に配置する
position: absoluteを利用して画像を縦横中央に配置する動作サンプルとサンプルコードです。
See the Pen CSS | Center the image (display: flex) by yochans (@yochans) on CodePen.
<div class="container">
<img src="https://1-notes.com/wp-content/uploads/2020/06/quality-50-1024x682.jpg">
</div>親要素に「position: relative」を指定して基準要素とし、子要素になる画像タグに「position: absolute」を指定します。
子要素の画像にはtopとleftそれぞれ50％を指定して配置、画像の支点が左上角なので「transform: translate(-50%, -50%)」にてサイズの半分の値を上および左にずらします。
親要素に「overflow: hidden」を指定しておくことで親要素より画像サイズが大きくなってもはみ出さないようにしています。
.container {
position: relative;
width: 100%;
height: 200px;
background: #000;
overflow: hidden;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 250px;
}