超便利！ img要素を表示領域（枠内）で上下左右に中央表示させる方法

2017年4月19日

タイトルにある通り、最近html内の画像を決まった表示幅、高さの枠内に上下左右に中央表示するようなコーディングが多いのですが、方法を調べてみても、中央表示にはなるが画像の大きさによってcssの値を変えたりしないといけないような、あまり汎用性のない参考サイトが目立ってたので、画像のサイズに関わらず上下中央表示できる、汎用性のあるcssの書き方を備忘録も兼ねて下記に記載しておきます。

WordPressなど、ブログ投稿の画像表示とかにも役立つかと思うので、参考にでもなればと思います！

html

<div class="sample">
<img src="※画像パス">
</div>

</div>

スポンサードサーチ

css

.sample {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.sample img {
position: absolute;
left: 50%;
top: 50%;
width: auto;
height: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

.sample {

position: relative;

width: 300px;

height: 300px;

overflow: hidden;

}

.sample img {

position: absolute;

left: 50%;

top: 50%;

width: auto;

height: auto;

-webkit-transform: translate(-50%, -50%);

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

上記のソースコードでimgタグを上下左右に中央表示させることができます。
デモのurlをクリックすると、ちゃんと表示されていることが確認できます。

デモ

解説

htmlは単純なので説明を省きますが、cssを確認するとpositionとtransform: translate;を組み合わせているのがわかります。
position:absolute;に、left: 50%;、top: 50%;を指定し、表示領域の右下に配置し、transform: translate(-50%, -50%);でx軸、y軸を元の位置に戻す、というようなcssの記述になるになります。
なぜ元の位置に戻している50%を-50%で相殺しているのに表示幅に対して中央になるのかと言うと、position:absolute;は、親要素の表示領域に対して移動しているのに対して、transform: translate(-50%, -50%);は親要素に関係なく移動しているので、うまく中央表示になるのかと思います。おそらくですが、、

これで、どんな画像のサイズが入っても上下左右中央表示にすることができるかと思います！