TOP > IT・テクノロジー > CSSの中央揃えで、最も万能で信頼できる実装テクニック | コリス

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

25コメント 2021-01-14 09:41  コリス

CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニッ

ツイッターのコメント(25)

ブロックの中央揃えテクニックは大事。
position: absolute;にtop: 50%;とかよくやってるクチだけど、今後はコレ使っていきたい(白目
もうCENTERタグ復活でお願いします... /
CSSの中央揃えテクニック。こんなにあるんだ!Webはゴールまでのプロセスが多いので、いくつか知っておくとケースバイケースで速く組める。引き出しをいくつか持っていると今度は組み合わせたりもできるので、こういう記事はありがたい!
なるほど。中央揃えするときに読みたい
2021年CSS中央揃えの最新テクニック
確かに。ただ中央にしたいだけなのになw
最近はcalc()?なるものがあるっぽくて驚いてる
これたまに分からなくなるからええな
grid短くて便利やな /
| コリス
cssの中央揃え、意外と難しいからこういうまとめ、重宝する
gridもうちょっと使いこなしたいなあ
| コリス
最も万能かつ信頼できる中央揃えのコードとして選ばれたのはこれでした

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

まぁ他の方法も知った上で
現場ではこのコード
最後で笑ってしまったw
ただ真ん中にしたいだけなのにな /
「CSSの中央揃えの決定版」的な記事にもう全く期待しなくなってしまったなあ・・・
殺伐としたCSS中央揃え界にIEちゃんが降臨!:
中央揃えに苦しめられるのそろそろやめたいですわね.
またnヶ月後に試すとしよう。CSSレイアウト技術覚書。webメモ。いつになったらIE捨てられるかな。>
上下左右の中央にする方法って色々なやり方があるんだな。

1. Content Center
2. Gentle Flex
3. Autobot
4. Fluffy Center
5. Pop & Plop
昔に比べたら容易になったけど、こんなにあるんだ、中央揃え。
中央揃えのやり方がまとめられてていいですね!

横方向の中央揃えはそんな難しくないんですが、縦方向が難しいですよね😅
以上
 

いま話題のニュース

もっと読む
PR