🐣

ブロックボックスの中央寄せは何が理想？

2023/08/12に公開

いわゆる「マージンゼロオート」

ブロックボックスの中央寄せをするには長年、以下のようなCSSを書いていました。

.hoge {
  width: 360px;
  margin-right: auto;
  margin-left: auto;
}

面倒くさい時は上下のmarginを指定してしまうことも

.hoge {
  width: 360px;
  margin: 0 auto;
}

ただ、やっぱり不要な 0 があるのは気持ち悪いし様々なリソースの無駄。
そこで登場するのが論理プロパティ。

.hoge {
  width: 360px;
  margin-inline: auto;
}

論理プロパティなのでflowの方向が変わると変化してしまいますが、そもそもflowの方向が変わるのであればどうせ指定し直す値でしょう。

margin-inlineの対応状況はこんな感じ。

もう充分使えますね。

例として width: 360px; を指定しましたが、レスポンシブを考えるとあまりよろしくない場合がありそうです。

min-width、max-width、calcなどを使うベタープラクティスがあるものだと思いますが、それはまた別の記事に書こうと思います。

どんなパターンが多いのかなぁ。

狭い幅では%で、広い幅はmax-widthでとかかな？

clamp()を使うのが一番簡単なのかな？

ちょうどいい親要素が居てくれればflexやgridでも中央寄せ可能ですね。

.oya {
  display: flex;
  justify-content: center;
}
.oya .ko {
  flex-basis: ★★★★★;
}

flex-basisの値は上記のwidthと同じでまた別問題ですね。

flexを使う方法はオーバースペックに感じてしまいますが（gridも）、冷静に考えれば何の問題もない気がします。今はこちらの方がおすすめされたりしているのかもしれません。

flexの入れ子で問題になることもないし、もう全部のブロック要素にflexを指定してしまえばいいのではないかという乱暴な方法論も一理あるのではないかと思い始めています。

実際にCSSのレンダリング速度とかはどうなのでしょうか。

これを書きながら何か他に方法が無いか考えたのですが、適当な親要素がいるならflexを使わなくても text-align: center; でいけてしまうのでは？

.oya {
  text-align: center;
}
.oya .ko {
  display: inline-block;
}

いける・・・。が、気持ち悪い。

まてまて、子のボックスの中で左寄せに戻したりしないといけないのは手間だからこれはボツだ。

margin-inline: auto; を使うか flex を使っていくかはまだ結論が出ない。レスポンシブの横幅のベタープラクティスが見つかればどちらが優勢か決まりそうということがわかった。

次はその記事だなぁ。