これからの CSS 上下中央揃えは align-content: center; 1行で
こんにちは森田です。
CSSでコンテンツ内のアイテムを上下中央に配置する時、flex や grid を使っていますか？
もしくは top: 50% や transform: translateY(-50%) を使っているかもしれません。
しかし、現在では1つのプロパティのみで block 要素のまま上下中央揃えが可能です。
align-content プロパティで上下中央揃えが可能に
上下中央にする CSS は、 align-content: center; です。
いや、flexのやつじゃん。と思った方もいるかもしれませんが、このプロパティが flex や grid 以外でも使えるようになりました。
CSS Box Alignment Module Level 3 にて策定された仕様で、ブロック要素やテーブルでも使えるようになります。
デモ
簡単なコードを用意しました。align-content: center; のみで上下中央揃えがされているのがわかります。
See the Pen Untitled by Sou (@sou-lab) on CodePen.
対応ブラウザ
Androidが対応されたことで、2024年9月現在、全てのモダンブラウザで使える状況になりました。
まとめ
今後の上下中央揃えは align-content: center; を使っておけば良さそうですね。
様々な方法で上下中央にレイアウトしていた思い出がプレイバックします。
Gaji-Labo ではより便利で効率的で CSS の書き方を探求していきます。
さまざまなチームや技術に触れながらスタートアップ支援をしてみたいというフロントエンドエンジニアさんがいれば、まずはカジュアルにお話してみませんか？
Gaji-Labo フロントエンドエンジニア向けご案内資料
Gaji-Laboでは、 Next.js 経験が豊富なフロントエンドエンジニアを募集しています
弊社では Next.js の知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違う Gaji-Labo を味わいに来ませんか？
Next.js の設計・実装を得意とするフロントエンドエンジニア募集要項
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
関連リンク
