Flexbox を使用して CSS でセンタリング効果を実現する方法

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

CSS の将来の開発の方向性は、次のような問題を解決するために Flexbox のデザインを使用することです。この一般的な問題を垂直方向に中央に配置します。 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 はサポートされていません

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

上記がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS3 を使用してカラフルな進行状況バー スタイルを作成する方法

CSS3 の配置とフローティングの分析

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