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 サイトの他の関連記事を参照してください。