CSSで画像を上下(縦)中央,左右(横)中央寄せにする方法5選

「CSSを使って画像を中央寄せにしたいけどやり方がよくわからない！」

という方のためにCSSで画像を上下や左右中央寄せにする方法を5種類ずつ解説します。目的に合わせて使ってください。

もちろんレスポンシブ対応しています。

うまくいかないときは下記記事を参考にしてください。

【左右中央寄せ1】text-align: center

<style>
.example6{
    /*コレ*/text-align: center;
    background: #f2f2f2;
    border: 1px solid #999;
}
</style>
<div class="example6"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像"></div>

text-alignはインライン要素の子要素の位置を指定するCSSです。

text-align: centerを指定すると左右中央寄せにできます。

【左右中央寄せ2】margin: auto

<style>
.example7{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example7 img{
    /*コレ*/display: block;
    /*コレ*/margin: auto;
}
</style>
<div class="example7"><img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像"></div>

画像は本来インライン要素ですが、display: blockを指定することでブロック要素にすることができます。

ブロック要素はmargin: autoで左右中央寄せできます。

インライン要素の画像と違い、ブロック要素にすると画像下にある空白を消すことができます。

【上下中央寄せ1】【万能】display:flex;align-items: center;

<style>
.example{
    /*コレ*/display: flex;
    /*コレ*/align-items: center;
    height: 200px;
    background: #f2f2f2;
    border: 1px solid #999;
}
</style>
<div class="example">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像">
</div>

display:flexは要素の位置調整をするCSSです。

横並べにするためだけと思いがちですが、並べる位置を調整するのにもよく使います。

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

左右も中央寄せする場合「justify-content: center;」を追記しましょう。

【上下中央寄せ2】【重ねるなら】position:absolute

<style>
.example3{
    /*コレ*/position: relative;
    height: 200px;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example3>img{
    /*コレ*/position: absolute;
    /*コレ*/top: 50%;
    /*コレ*/transform: translate(0,-50%);
}
</style>
<div class="example3">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像">
</div>

position:absoluteとtop: 50%、transform: translate(0,-50%)を組み合わせると上下中央寄せができます。

【左右中央寄せ4】left: 50%;transform: translate(-50%,-50%)

左右も中央寄せする場合はleft: 50%を追記しtransform: translate(-50%,-50%)に変更しましょう。

<style>
.example3-2{
    position: relative;
    height: 200px;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example3-2>img{
    position: absolute;
    top: 50%;
    /*コレ*/left: 50%;
    /*コレ*/transform: translate(-50%,-50%);
}
</style>
<div class="example3-2">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像">
</div>

【上下中央寄せ3】【表なら】tdにvertical-align:middle

<style>
.example2{
    width: 100%;
    height: 200px;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example2 td{
    /*コレ*/vertical-align: middle;
}
.example2 td img{
    display: block;
}
</style>
<table class="example2">
    <tr>
        <td><img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像"></td>
    </tr>
</table>

table内のセルであるtd内の画像ならvertical-align: middleで上下中央寄せにできます。

ただし、tableやtdは表で使うべきでありレイアウトを整えるためだけに使うべきではありません。

imgの下に少し隙間があり少し上寄りになってしまいます。

imgにdisplay: blockを指定するとこの隙間がなくなり上下中央寄せになります。

左右も中央寄せする場合、imgに「margin: auto」を追記しましょう。

imgをdisplay: blockでブロック要素にしたため「text-align」では左右寄せはできません。

【上下中央寄せ4】【縦の間隔が決まってるなら】padding

<style>
.example4{
    padding: 40px 0;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example4>img{
    display: block;
}
</style>
<div class="example4">
    <img src="https://csshtml.work/wp-content/uploads/cat.jpg" width="200" alt="画像">
</div>

paddingを使って文字の上下にスペースを作ります。

imgの下に少し隙間があり少し上寄りになってしまいます。

imgにdisplay: blockを指定するとこの隙間がなくなり上下中央寄せになります。

左右も中央寄せする場合、imgに「margin: auto」を追記しましょう。

imgをdisplay: blockでブロック要素にしたため「text-align」では左右寄せはできません。

【上下中央寄せ5】【背景なら】background-position

<style>
.example5{
    height: 200px;
    background: #f2f2f2 url(https://csshtml.work/wp-content/uploads/cat.jpg) no-repeat 0 center / 200px auto;
    border: 1px solid #999;
}
</style>
<div class="example5">
</div>

background-positionは背景画像の位置を指定するCSSです。

background-position:横位置 縦位置の順で指定します。

centerを指定すると中央寄せができます。

「background-position:0 center」なら左寄せの上下中央寄せです。

【左右中央寄せ5】background-position: center center

左右も中央寄せする場合「background-position: center center」を追記しましょう。

まとめ

【左右中央寄せ】

1. 【インライン要素の子要素を】text-align: center
2. 【ブロック要素なら】margin: auto

【上下中央寄せ】

1. 【万能】display:flex;align-items: center;
2. 【重ねるなら】position:absolute
3. 【表なら】tdにvertical-align:middle
4. 【縦の間隔が決まってるなら】padding
5. 【背景なら】background-position

以上、CSSで画像を上下中央、左右中央寄せする方法でした。