【CSS】画像(img)を親要素からはみ出させつつ中央寄せにする方法

画像を中央寄せする方法といえば「text-align:ceter」や「margin:auto」ですが、これは画像が親要素より小さい場合です。

画像が親要素からはみだすくらい大きいとこれらの方法では中央寄せできません。

画像を親要素からはみ出させつつ中央寄せにする方法を紹介します。

【方法1】justify-content:center

親要素にdisplay: flexとjustify-content: centerを指定すると画像がはみ出しても左右中央寄せできます。

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    border: 2px solid #999;
    width: 30%;
    margin: auto;
}
.example img{
    max-width: none;
    width: 500px;
    display: block;
    opacity: 0.8;
}
</style>
<div class="example"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

後述する方法と比べてwidthを直したとき修正する箇所がないので楽です。

【上下中央寄せ】align-items: center

さらにalign-items: centerを指定すると縦の中央寄せもできます。

<style>
.example1-2{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    justify-content: center;
    border: 2px solid #999;
    width: 30%;
    height: 200px;
    margin: 50px auto;
}
.example1-2 img{
    max-width: none;
    width: 500px;
    display: block;
    opacity: 0.8;
}
</style>
<div class="example1-2"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

【方法2】margin-left:calc(50% - ○/2)

左右中央寄せするには、imgの「margin-left」に「calc(50% - ○/2)」を指定します。

○にはimgのwidthと同じ値単位を入れます。

<style>
.example2{
    border: 2px solid #999;
    width: 30%;
    margin: auto;
}
.example2 img{
    max-width: none;
    /*この値*/width: 500px;
    /*コレ*/margin-left: calc(50% - 500px/2);
    display: block;
    opacity: 0.8;
}
</style>
<div class="example2"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

【上下中央寄せ】margin-top: calc(△/2 - □/2)

上下中央寄せするには、imgの「margin-top」に「calc(△/2 - □/2)」を指定します。

△には親要素のheightと同じ値単位を入れます。

□にはimgのheightと同じ値単位を入れます。imgのheightがautoの場合はwidthと画像の縦横比から計算しましょう。

<style>
.example2-2{
    border: 2px solid #999;
    width: 30%;
    /*この値*/height: 200px;
    margin: 50px auto;
}
.example2-2 img{
    /*コレ*/margin-top: calc(200px/2 - 281px/2);
    max-width: none;
    width: 500px;
    margin-left: calc(50% - 500px/2);
    display: block;
    opacity: 0.8;
}
</style>
<div class="example2-2"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" alt=""></div>

【まとめ】画像を親要素からはみ出させつつ中央寄せにする方法

親要素にdisplay: flexを指定したうえで下記を指定する

【左右中央寄せ】justify-content: center

【上下中央寄せ】align-items: center

marginで調整する方法は計算がメンドウであるため非推奨。

以上、画像を親要素からはみ出させつつ中央寄せにする方法でした。