CSSでインライン要素やブロック要素を中央寄せする方法 ホームページ制作 大阪の株式会社TREVO｜SEO対策・システム作成

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

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

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

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

css

.sample1{
  text-align: center;
}

結果

ブロック要素の中央寄せ

ブロック要素を中央にする場合は、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
}

結果

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

ブロック要素を上下の中央寄せる場合は、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;
}

 
結果