CSSで簡単に中央揃え！インライン・ブロック要素の使い分けと例文 | 大阪 ホームページ制作 株式会社TREVOの技術ブログ

ウェブ制作では、要素を中央寄せすることが頻繁に求められます。インライン要素やブロック要素を効率的に中央揃えするには、CSSを正しく活用することが重要です。この記事では、左右中央、上下中央、上下左右の中央寄せ を実現する方法を具体例を交えて解説します。

インライン要素の左右中央揃え

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

コード例

HTML

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

CSS

.sample1 {
    text-align: center;
}

結果

ポイント: text-align: center; はインライン要素専用です。

ブロック要素の左右中央揃え

ブロック要素を中央揃えするには、margin: 0 auto; を使用します。幅（width）を指定する必要がある点に注意してください。

コード例

HTML

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

CSS

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

結果

ポイント: margin: 0 auto; を指定するには width を設定する必要があります。

インライン要素の上下中央揃え

インライン要素を上下中央に揃える場合、display: flex; と align-items: center; を使用します。

コード例

HTML

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

CSS

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

結果

ポイント: Flexboxを使うと、親要素内でインライン要素を上下中央に配置できます。

ブロック要素の上下中央揃え

ブロック要素を上下中央に揃える場合も、display: flex; と align-items: center; を使用します。

コード例

HTML

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

CSS

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

結果

ポイント: 子要素のサイズ指定に注意してください。

ブロック要素の上下左右の中央揃え

上下左右の中央揃えを実現するには、Flexboxで 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;
}

結果

ポイント: Flexboxは、複数方向の中央揃えが簡単にできます。

まとめ

中央寄せはウェブ制作で頻繁に必要となる基本テクニックです。

• インライン要素: text-align: center; を使用。
• ブロック要素（左右中央）: margin: 0 auto; を活用。
• Flexboxで上下左右中央: align-items: center; と justify-content: center; を組み合わせる。

これらの方法を状況に応じて使い分けることで、柔軟なデザインが可能になります。ぜひ試してみてください！