Flexbox を使用して CSS でセンタリング効果を実現する例を共有する

この記事では、CSS でセンタリング効果を実現するために Flexbox を使用する例を紹介します。IE ブラウザーの互換性の問題に注意してください。必要な場合は参考にしてください。

CSS の将来の開発の方向性は、次のような問題を解決することです。これはよくある問題です。 Flexbox には複数の中央揃え方法があることに注意してください。列を分割したり、奇妙なレイアウトの問題を解決したりするためにも使用できます。

.Center-Container.is-Flexbox {   
  display: -webkit-box;   
  display: -moz-box;   
  display: -ms-flexbox;   
  display: -webkit-flex;   
  display: flex;   
  -webkit-box-align: center;   
     -moz-box-align: center;   
     -ms-flex-align: center;   
  -webkit-align-items: center;   
          align-items: center;   
  -webkit-box-pack: center;   
     -moz-box-pack: center;   
     -ms-flex-pack: center;   
  -webkit-justify-content: center;   
          justify-content: center;   
}

利点:

コンテンツの高さと幅は任意であり、オーバーフローも適切に実行できます
さまざまな高度なレイアウト手法に使用できます

また、注意してください: IE8-9 はサポートされていません

を記述する必要があります本文のスタイル、または追加のコンテナが必要です
最新のブラウザと互換性を持たせるには、さまざまなベンダー プレフィックスが必要です
潜在的なパフォーマンスの問題がある可能性があります

以上がFlexbox を使用して CSS でセンタリング効果を実現する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。