cssで画像の中央に画像を入れたい場合どうしたらいいの？

cssの学習中なのですが、画像の中央に画像を入れたい場合、どのようにすればいいのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こんにちは、色々な方法があると思います。

絶対配置を使う方法
マイナスマージンを使う方法
背景画像を使う方法

わかりやすいのは1番かもしれないですね。

サンプル

html
1<div>
2<img class="back" src="http://placehold.jp/24/eeeeee/cccccc/250x200.png?text=背景">
3<img class="overlay" src="http://placehold.jp/24/33eeee/33cccc/150x100.png?text=前景">
4</div>

scss
1.absolute {
2    position: relative;
3    .overlay {
4        position: absolute;
5        top: 0;
6        bottom: 0;
7        left: 0;
8        right: 0;
9        margin: auto;
10    }
11}
12
13.negativeMargin {
14    display: flow-root;
15    .overlay {
16        margin-top: -150px;
17        margin-bottom: 50px;
18    }
19}
20
21.background {
22    width: 250px;
23    height: 200px;
24    aspect-ratio: 250 / 200;
25    background-image: url(http://placehold.jp/24/eeeeee/cccccc/250x200.png?text=背景);
26    margin: 0 auto;
27    display: flex;
28    align-items: center;
29    .back {
30        display: none;
31    }
32}

scssをコンパイルしたCSSはこちら。

css
1.absolute {
2  position: relative;
3}
4.absolute .overlay {
5  position: absolute;
6  top: 0;
7  bottom: 0;
8  left: 0;
9  right: 0;
10  margin: auto;
11}
12
13.negativeMargin {
14  display: flow-root;
15}
16.negativeMargin .overlay {
17  margin-top: -150px;
18  margin-bottom: 50px;
19}
20
21.background {
22  width: 250px;
23  height: 200px;
24  aspect-ratio: 250/200;
25  background-image: url(http://placehold.jp/24/eeeeee/cccccc/250x200.png?text=背景);
26  margin: 0 auto;
27  display: flex;
28  align-items: center;
29}
30.background .back {
31  display: none;
32}