【CSS】divやdisplay:blockなどブロック要素を中央寄せする方法

「中央寄せと言えばtext-align:centerなのにdisplay:blockを指定したら中央寄せにならないぞ？どうやるんだ？」

「divやブロック要素はどうやったら中央寄せになるの？」

divやdisplay:blockなどブロック要素の中央寄せについて解説します。

結論：margin:autoとwidthを指定する

下記はaタグに「display: block」を指定してブロック要素にした例です。

divは「display: block」がなくてもブロック要素です。

ブロック要素の中央寄せ

<style>
.blockcenter{
    display: block;
    /*コレ*/margin: auto;
    /*コレ*/width: 300px;
    height: 100px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>

<a class="blockcenter" href="#">ブロック要素の中央寄せ</a>

marginは外側の余白を指定するCSSです。

autoにすると左右の余白を自動で取ってくれて中央寄せになります。

display:blockを指定するとブロック要素になり、何も指定しないと横幅いっぱいになります。これでは左右に余白がないため中央寄せになりません。

よってwidthを指定する必要があります。

ブロック要素の中央寄せがうまくいかないときはこちら↓

中身を中央寄せするには「text-align:center」

<style>
.textcenter{
    /*コレ*/text-align: center;
    height: 100px;
    border: 1px solid #333;
    background: #f2f2f2;
}
</style>

<div class="textcenter">
display:blockの中央寄せ
</div>

子要素を中央寄せするにはtext-align:centerを指定します。

ただし、text-align:centerで中央寄せになるのはインライン要素のみです。

ブロック要素はmargin:autoで中央寄せしましょう。

【まとめ】ブロック要素の中央寄せ

margin:autoとwidthを指定する

以上、divやCSS display:blockなどブロック要素の中央寄せについてでした。