CSS で Div を中央に配置する方法 (Flexbox)
CSS フレックスボックス レイアウトを視覚的に構築します。フレックス方向、コンテンツの位置調整、項目の配置、コンテナ上のフレックスラップとギャップに加え、子ごとのフレックスグロー、フレックスシュリンク、フレックスベースをすべてライブプレビューとコピー可能な CSS で実行できます。
結果
CSS で最もよく聞かれる質問に対する直接の答えは次のとおりです。div を中央に配置するには、display: flex、justify-content: center、および align-items: center をその親に配置します。これだけです。コンテナー上に 3 つの宣言があれば、子はコンテナー内の水平方向と垂直方向の両方で、任意のサイズで完全に中央に配置されます。このページでは、まさにその組み合わせがすでに適用されたジェネレーターが開きます。そのため、以下のプレビューでは、現在 3 つの番号付きボックスで動作していることが示されています。
フレックスボックスを使用する前は、div を中央に配置するにはハックが必要でした。 margin: 0 auto は水平方向にのみ中央に配置され、固定幅のブロックでのみ機能しました。垂直方向のセンタリングとは、位置を意味します。負のマージンを使用した絶対位置または変換トリックです。どちらも、コンテンツのサイズが変更された瞬間に脆弱になります。 justify-content は主軸を処理し、align-items は交差軸を処理します。子の高さや幅に関係なく、両方の軸が両方とも中央に配置されます。これが、まさにこのペアが標準的な回答となった理由です。
任意のコントロールを下にドラッグし、コンテナーの形状が変化しても 3 つのプレビュー ボックスが中央に留まるか、それらの間にギャップを追加するかを確認します。正しく表示されたら、下部の CSS ブロックをスタイルシートに直接コピーします。最新のすべてのブラウザで同じように実行され、ライブラリは必要ありません。