これからの 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 にご相談ください。
オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。
フロントエンドの相談をする！関連リンク
