CSSの中央揃えで、最も万能で信頼できる実装テクニック

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー

[coliss]

CSSで天地左右の中央に要素を配置する最新テクニックのまとめ。

[degucho]

20年経っても標準化しねえなあしかし。いつまでテクニック、ハック、Tipsが出続けるのか

[ms05b]

ただ真ん中に揃えるだけで、こんな事しなきゃいけないなんてCSSは欠陥品だとしか思えないな。もっと簡単にしろよ。最近は、CSSに興味全くなくなってしまったが、俺の時はmargin autoでやってたな。縦がクソなんだよな

[circled]

おーっとSafariがこれを華麗に無視っ！！！(CSSあるある)

[maiani]

<center>

[newnakashima]

flexでjustfy-contentとalign-itemsをcenterにするのが一番好きだなあ。ネストしてけばほぼどんなレイアウトでもいけるし。

[knzm_img]

HTML&CSSから離れて5年以上経つけど、まだこんなことやってるのか（失礼）

[sotter0x]

男は黙ってマージンオート

[everybodyelse]

なんで令和の時代にまだ中央揃えで悩まなければならないのか…。

[coppieee]

本文読まずに批判してる人は知識止まってるだけだからちゃんと読め→"CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し素直にこれらのジョークを笑えるようになりました"

[makimakiJP]

ただ真ん中にしたいだけなのにね。。

[morimarii]

この記事自体がジョークっぽい

[naohor]

こんなんブクマしてる時点で最近コーディングしてないのバレてしまう

[Rishatang]

flexboxが使えるようになった時点でめちゃくちゃ楽になったし、なんならdisplay: tableやtransformが使える時点で上下左右中央揃えに関してはしんどいことはなかった。未だに文句言っている人は化石のような知識しかないだけ

[gayou]

相変わらず良くわからない。

[kotaponx]

DAIGO「Center Sugoi Shindoi」

[adsty]

中央揃えのテクニックの長所と短所。

[jantyran7]

便利そう

[yoshi-na]

特に問題ない限りコレ→“Gentle Flex”

[kyukyunyorituryo]

EPUBの中央揃えは秘伝のタレみたいだった。

[fujibay1975]

divだらけ

[mochinaga]

「俺の知ってる最強のセンター揃え」シリーズ

[kumagoro_morino]

のろい

[mag4n]

なしてこんなに面倒くさいのかはblock要素とinline要素＋マージンauto＋HTMLの積み重ねギミックの複雑な絡みが原因と見てる。

[tkmkg8m]

記述が多少長かろうが flex で（少なくとも現時点では）ファイナルアンサーだと思ってたんだけど違うの？ 記述が少し長いくらい、たいしたデメリットじゃなくない？ 必要ならモジュール化するとかすればいいし。

[spark7]

こんなに翻訳がたどたどしかったっけ/ transformで-50%のは滲むから避けた方が良いよ。

[hamamuratakuo]

現在主流の5つのテクニック

[fai_fx]

4. Fluffy Center のサンプルは上下 10ch のパディングを確保してるけど、なんでMVP の紹介では 2ch になっているのか謎。(ch自体は0という文字のフォントの幅を示す単位)

[strawberryhunter]

同じタイトル何十回も見たよ。

[natsumendy1]

cssテクニック

[Wafer]

IEを対象ブラウザからはずすとかじゃないのか

[Kototy25]

5. Pop & Plop、むっちゃ使う。むっちゃ使える。