【回答】margin autoによる中央寄せについて

問題

ブロック要素を中央寄せしようとしましたが、うまく行きませんでした。

何故でしょうか。

HTML

<div class="parents">
    <div class="child">
        コンテンツ
    </div>
</div>

CSS

.parents {
    width: 100%;
}
.child {
    margin: 0 auto;
}

回答

child要素にwidthが指定されていないから。以下のようにCSSを修正することで中央寄せできます。この時widthの指定が100%だとうまく行かないので注意が必要です。

CSS

.parents {
    width: 100%;
}
.child {
    width: 100px;
    margin: 0 auto;
}

参考

CSSで要素を上下や左右から中央寄せする7つの方法 | 株式会社グランフェアズ