ホームページ >ウェブフロントエンド >フロントエンドQ&A >CSSでdivを中央揃えにする方法
CSS はフロントエンド開発の重要な部分であり、DIV を中央に配置することは一般的な要件です。今日は、CSS を使用して DIV を中央に配置する方法について説明します。
まず、DIV の中央配置の 2 つのケースを見てみましょう。1 つは、DIV がブラウザ ウィンドウの中央に配置される場合、もう 1 つは、DIV がそれが含まれるコンテナの中央に配置される場合です。位置した。
最初のケースは、DIV がブラウザ ウィンドウの中央に配置されている場合です。これは次の方法で実現できます。
方法 1: 絶対配置とマージンを使用する
まず、DIV を絶対配置 (position:Absolute;) に設定し、左、上、右、下の 4 つの方向を設定します。 . は 0 なので、ブラウザ ウィンドウ全体に表示されます。次に、以下に示すように、マージン属性を auto に設定して、DIV を水平方向と垂直方向の両方で中央揃えにします。
div { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; }
方法 2: フレックスボックス レイアウトを使用する
フレックスボックス (フレキシブル レイアウト) は非常に人気があります。コードは次のとおりです:
.container { display: flex; align-items: center; justify-content: center; }
DIV が配置されているコンテナをフレックスボックス レイアウト (表示: flex ;) に設定し、align-items を設定します。 DIV を垂直方向と水平方向の両方で中央に配置できるように、justify-content プロパティを中央に配置します。
方法 3: グリッド レイアウトを使用する
グリッド レイアウトは、フレックスボックス レイアウトよりも強力なレイアウト方法であり、より複雑なレイアウト効果を実現できます。 DIV センタリングの実装に関しては、次のように記述できます:
.container { display: grid; place-items: center; }
DIV が配置されているコンテナをグリッド レイアウト (表示: Grid;) に設定し、place-items 属性を center に設定します。 DIV を垂直方向と水平方向の両方で中央に配置できること。
2 番目のケースは、DIV が配置されているコンテナーの中央に配置される場合です。これは次の方法で実現できます。
方法 1: text-align 属性を使用する
DIV がインライン要素の場合、それが配置されているコンテナーの text-align 属性を中央に設定できます。 DIV は水平方向に中央揃えに配置できます。コードは次のとおりです。
.container { text-align: center; } div { display: inline-block; }
ここでは、DIV を inline-block 要素として設定して、それに width 属性を設定できるようにします。次に、DIV が配置されているコンテナの text-align プロパティを center に設定して、DIV を水平方向に中央揃えにします。
方法 2: margin 属性を使用する
DIV がブロック レベルの要素の場合、margin 属性を使用して中央揃えを実現できます。コードは次のとおりです。
div { width: 200px; height: 200px; margin: 0 auto; }
ここでは、DIV をブロックレベル要素として設定し、その幅を 200px、高さを 200px に設定します。次に、DIV の左右のマージンを自動に設定して、DIV を水平方向の中央に配置します。
方法 3: フレックスボックス レイアウトを使用する
同様に、フレックスボックス レイアウトを使用して、DIV が配置されているコンテナ内の中央に DIV を配置できます。コードは次のとおりです。
.container { display: flex; align-items: center; justify-content: center; } div { width: 200px; height: 200px; }
DIV が配置されているコンテナをフレックスボックス レイアウトに設定し、align-items プロパティと justify-content プロパティの両方を center に設定して、DIV を両方の中央に配置できるようにします。垂直方向と水平方向。
要約すると、上記の方法を使用して DIV を中央に配置し、特定の状況に応じてさまざまな方法を選択できます。この記事が、CSS のセンタリング手法をよりよく理解し、適用するのに役立つことを願っています。
以上がCSSでdivを中央揃えにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。