Zennで記事をよく書いていますので、そちらもよければご覧ください。

はじめに

CSS で margin を使ったときに中央揃えができなかったときに調べたことを記載しました。

修正前のソースコード

div {
  margin: 0 auto;
  background-color: yellow;
}

原因

margin:0 auto;を使ったときに中央揃えできないときは下記を確認します。

ブロックレベルの要素に対して指定しているか
width の指定をしているか

margin はブロックレベルの要素に対して指定するが、ブロックレベルだとデフォルトで width は 100%となっているため親要素の幅いっぱいに広がっています。width を指定することで(親要素の幅 - 要素の幅)が左右にできるため auto で左右の余白を均等に分配され、中央に配置されます。

ソースコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div>text1</div>
  </body>
</html>

div {
  margin: 0 auto;
  width: fit-content; /*コンテンツのサイズに基づいて適切な幅を指定*/
  background-color: yellow;
}