ホーム(記事一覧)へ

CSSで画像を上下中央にする方法5選

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

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

また、上下左右中央寄せの方法も記載していますので必要に応じてご利用ください。

方法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です。

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

左右も中央寄せする場合「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%)を組み合わせると上下中央寄せができます。

左右も中央寄せする場合は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」なら左寄せの上下中央寄せです。

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

まとめ

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

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

関連記事