【CSS】margin:autoとtext-align:centerの違いと使い分け

CSSで中央寄せする方法を調べると「margin:auto」と「text-align:center」の方法が紹介されます。だからといってよく理解せずに使うとうまく中央寄せできません。

margin:autoとtext-align:centerの違いと使い分けを解説します。

【結論】中央寄せしたい要素がインライン要素かブロック要素か

margin:autoを使うかtext-align:centerを使うかは、中央寄せしたい要素がインライン要素かブロック要素かで判断します。

インライン要素とはaタグやimgのように横に並ぶ要素です。

ブロック要素とはdivやpタグのように縦に並ぶ要素です。

インライン要素なら親にtext-align:center、

ブロック要素なら自身にmargin:autoを指定することで中央寄せになります。

インライン要素→親にtext-align:center

インライン要素またはinline-blockの場合、text-align:centerを使います。

text-alignが機能する条件は下記のとおりです。

<style>
.example{
    /*コレ*/text-align: center;
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example"><a href="#">中央寄せする要素</a></div>

ブロック要素→自身にmargin:auto

ブロック要素またはtableの場合、margin:auto（margin:0 auto）を使います。

margin:autoが機能する条件は下記のとおりです。

<style>
.example2{
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
.example2>div{
    /*コレ*/margin: auto;
    width: 200px;
    background: #ffffff;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example2"><div>中央寄せする要素</div></div>

どちらでも→親にdisplay:flexとjustify-content:center

インライン要素だろうがブロック要素だろうが関係なく中央寄せできるのがjustify-content:centerです。

justify-content:centerが機能する条件は下記のとおりです。

<style>
.example3{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example3"><a href="#">インライン要素</a></div>

<style>
.example4{
    /*コレ*/display: flex;
    /*コレ*/justify-content: center;
    background: #d1ecfd;
    border: 1px solid #333;
    padding: 10px;
}
.example4>div{
    width: 200px;
    background: #ffffff;
    border: 1px solid #333;
    padding: 10px;
}
</style>
<div class="example4"><div>ブロック要素</div></div>

なお、インライン要素が改行されると左寄せになります。

改行しても中央寄せにしたい場合は「text-align:center」を使いましょう。

【まとめ】margin:autoとtext-align:centerの違いと使い分け

	中央寄せする要素	指定する要素
margin:auto	ブロック要素	自身
text-align:center	インライン要素	親要素
justify-content:center	なんでも	親要素

以上、margin:autoとtext-align:centerの違いと使い分けでした。