大阪のホームページ制作会社 株式会社TREVO
技術ブログ

CSSでインライン要素やブロック要素を中央寄せする方法

2019.11.28.

CSS

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WEB制作をしていると要素の左右の中央寄せや場合によっては上下の中央、上下左右の中央寄せが必要となる場合があります。
中央寄せの様々な方法を紹介します。

インライン要素の中央寄せ

テキストや画像などのインライン要素の中央揃えは、親となるブロック要素にtext-align:center;を指定します。
html

<div class="sample1">
sample text
</div>

css

.sample1{
  text-align: center;
}

結果

sample text

ブロック要素の中央寄せ

ブロック要素を中央にする場合は、margin: 0 auto;を指定します。左右のmarginが自動で計算されて中央寄せになります。
widthの数値設定が必要となります。

html

<div class="box1">
	<div class="sample2"></div>
</div>

CSS

.sample2{
	width: 60px;
	height: 60px;
	background: #006237;
	margin: 0 auto;
}

 

結果

インライン要素上下の中央寄せ

テキストや画像などのインライン要素を上下の中央寄せる場合は、display: flex;とalign-items: center;を指定します。
html

<div class="sample3">
	sample text
</div>

CSS

.sample3{
	height: 100px;
	display: flex;
	align-items: center;
	background: #DDFFF0
}

結果

sample text

ブロック要素の上下の中央寄せ

ブロック要素を上下の中央寄せる場合は、display: flex;とalign-items: center;を指定します。
html

<div class="box2">
	<div class="sample5"></div>
</div>

CSS

.sample5{
	width: 100%;
	height: 100px;
	background: #DDFFF0;
	display: flex;
	align-items: center;
}

.box2{
	width: 60px;
	height: 60px;
	background: #006237;
}

結果

ブロック要素の上下左右の中央寄せ

ブロック要素を上下左右の中央寄せる場合は、display: flex;とalign-items: center;とjustify-content: center;を指定します。
html

<div class="box3">
	sample text
</div>

css

.sample6{
	width: 100%;
	height: 100px;
	background: #e5e5e5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.box3{
	width: 60px;
	height: 60px;
	background: #e74c3c;
}

結果

大阪のホームページ制作会社TREVOでは、ホームページ制作に関する情報を掲載しています。最短2日で仮サイトを公開するサービスやSEO対策に特化したホームページ制作、オリジナルホームページデザイン、ライティング、リスティング広告、WEBマーケティングなどのサービスをご紹介しています。

twitter Facebook Pocket LINE はてブ
お見積もり