CSSで簡単！画像を画面の真ん中に配置する方法

By hiroki in HTML & CSS, Web-Design 0 Comment

画像を画面の中心に配置する方法です。

Webページをレイアウトする上で一つ重要になってくるのが、様々な大きさ(解像度)のスクリーンでも崩れることなく表示させるようにすることですよね。ということは、パソコン、タブレット、スマートフォンの端末からアクセスを想定して作ることになります。さらに、パソコンのスクリーンだけでも小さいものから大きいものまであるので一概に「このサイズで作れば大丈夫」というのがありません。

現在、主流なページのサイズである1024px × 768pxも実は一番解像度の低いパソコンのスクリーンを想定したサイズです。では、そのような様々なスクリーンサイズがあるなかで、常に画像が背景の中心に表示させるようにするにはどうしたらいいのでしょうか。

実はCSSやJavascriptを駆使するたくさんの方法があり、中級者以上のかたにとっては「そんなの簡単！」という方がほとんどだと思いますが、コーディングを初めたばかりの初心者にとってはつまづくポイントだったりします。そんな方のために今回はcssを使った２つの簡単な方法を紹介します。

 

画面の高さや幅に合わせて画像を中心に配置するCSS

１つ目は、一番単純でわかりやすい方法です。仮に、center.jpg を中心に配置してみましょう。

[CSS]

body {
   width:100%;
   height:100%;
   background:url("http://dummyimage.com/100x100/08c/fff&text=centering.jpg") center center no-repeat;
}

[RESULT]

これで背景の真ん中にcentering.jpgを設置できました。簡単ですね。ではもう一つの方法です。仮に、高さと幅が100pxの画像を使ってみます。

[HTML]

<img src="http://dummyimage.com/100x100/08c/fff&text=centering.jpg">

[CSS]

img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100px; /*画像の幅*/
   height: 100px; /*画像の高さ*/
   margin-top: -50px; /* height(画像の高さ)の半分の値 */
   margin-left: -50px; /* width(画像の幅)の半分の値 */
}

[RESULT]

positionをabsoluteに指定して、top、leftを50%に指定し、それぞれの値の半分を引くという方法です。面白い発想ですね。

Related Articles.