CSS で中央揃えのカードを作る

why

kei-s-lifehack.hatenablog.com

• 便利アプリを作りたくなった
• 中央に全てが寄っていて欲しかった
• Chrome extension の care your eyes も動いて欲しかった
• それの中央揃えになぜか苦戦したので書いておく

このテキストのみの html を css で中央に揃える。

gird / justify center / align center

• 一番最初にヒットした中央揃えの方法

coryrylan.com

section {
  display: grid;
  justify-content: center;
  align-content: center;
}

• 縦方向には中央にならない
• align-items でもダメだった

---

100vh / place-items center center

css-tricks.com

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

• これは成功した。
• grid で、100vh, place-items: center center を使う方法
• これなら care-your-eyes も効く！！！

Microsoft Edge, which supports CSS grid, doesn’t support place-items yet. You’d have to use align-items: center; and justify-content: center; instead.

• Edge ブラウザでは grid はサポートするけど place-items はまだ。
• そっちでは align-items: center; and justify-content: center; を使って

らしい。その 2つは さっき動かなかったが、Chrome だからか？ Chrome では逆に align center が対応してないのか？

css のリセットをしていないからか？要検証

とりあえず自分がメインで使うアプリだから Edge の未対応は ヨイカとする

---

top left 50%/ translate -50% -50%

.centered {
  position: fixed; /* or absolute */
  top: 50%;
  left: 50%;
}

• position fixed で top, left, を 50% にした
• これでシンプルに 真ん中 （よりの右下）にいく
• care your eyes の強制ダークモードを使うと聞かない

transform: translate(-50%, -50%);

• translate -50%, -50%, をつけると完全に中央に行く。
• さっきのを幅と高さの半分の分だけ マイナス座標に 動かせば中央にそろう
• care your eyes があると上に吹っ飛んでいくのがネック

rirekisho.yagish.jp

• ヤギッシュなどでは上に吹っ飛んでいかないからこれもそうしたい
• なので top left 50%, translate -50% -50%, の方法は今回は不採用