トップページ > ブログ > 【CSS】要素を上下左右「中央配置」にする3つの方法【position,flex,grid】

BLOG

ブログ

UPDATE:2024.1.26

CATEGORY

【CSS】要素を上下左右「中央配置」にする3つの方法【position,flex,grid】

cssで要素を上下左右で中央寄せにしたい時、いくつかの方法がありますね。

今回は簡単に要素を中央寄せに出来る代表的な方法を3つご紹介します。



1.positionプロパティを使用した方法


position

positionプロパティは、要素がどのように配置されるかを設定するcssプロパティです。
親要素にposition: relativeを設定し、中央寄せしたい要素に対してposition: absoluteを設定して
top、leftの位置を中央にすると中央寄せとなりますね。


【HTML】
〈div〉
 〈img src=”images/watabo.png” alt=””〉
〈/div〉

【CSS】
div{//親要素
 width: 500px;
 height: 500px;
 position: relative;
}

img{//子要素
 width: 100px;
 position: absolute;
 top:50%;//中央寄せ
 left: 50%;//中央寄せ
 transform: translate(-50%,-50%);//中央寄せ(調整)
}


2.フレックスボックスを使用した方法

フレックスボックスの基本概念

フレックスボックスは親要素の「フレックスコンテナ」に対してdisplay:flexを指定することで、
その子要素の「フレックスアイテム」に対してレイアウトを適用させることができます。
この時、「フレックスアイテム」を中央寄せにすることも可能です。

フレックスボックスを使用すると、①よりも簡単に中央寄せができます。


【HTML】
〈div〉
 〈img src=”images/watabo.png” alt=””〉
〈/div〉

【CSS】
div{//親要素
 width: 500px;
 height: 500px;
 display: flex;//フレックスボックス
 align-items: center;//上下の配置の指定(中央)
 justify-content: center;//左右の配置の指定(中央)
}

img{//子要素
 width: 100px;
}



3.グリッドレイアウトを使用した方法

グリッドレイアウトのボックス配置

グリッドレイアウトを利用すると、今回紹介する3つの方法の中で一番簡単に要素を中央配置できます。

グリッドレイアウトでは要素を格子状に並べて自由に配置することができ、
中央配置にするにはdisplay: gridを指定した「グリッドコンテナ」と呼ばれる親要素に対して
「place-content: center」を指定すると、その子要素である「グリッドアイテム」が中央配置されます。

【HTML】
〈div〉
 〈img src=”images/watabo.png” alt=””〉
〈/div〉

【CSS】
div{ //親要素
 width: 500px;
 height: 500px;
 display: grid;//グリッドレイアウト
 place-content: center;//中央配置(一括指定)
}

img{//子要素
 width: 100px;
}


最後に

ちなみに…
flexでは「place-content: center」と指定しても中央寄せとはなりません。
flexでも二行で完結できるかな、と思ったのですが……


▼こちらの記事に理由が書かれていますが、flexを使う場合は結局最短3行となってしまうようです。

一番短いコードで済ませたい場合は③のリッドレイアウトを利用する方法を使ってみてくださいね。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE