CSS を使用して div を中央揃えにする 7 つの最も簡単な方法

この CSS ガイドでは、div を水平方向および垂直方向にセンタリングするための 7 つの効率的な方法を検討し、各アプローチの長所と短所を検証します。飛び込んでみましょう!

方法 1: フレックスボックス

最も単純な方法は、フレックスボックスを利用します。 display: flex、justify-content: center (水平方向のセンタリング)、および align-items: center (垂直方向のセンタリング) を親コンテナに適用します。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}

Flexbox は適応性に優れています。 幅と高さの指定は必須ではありません。これは、単一のコンテナ内で複数の要素を中央に配置する場合に特に効率的です。

方法 2: margin: auto

この一般的な手法では margin: auto を使用します。 ただし、次のような制限があります。

• 要素には定義された幅が必要です。
• 要素にはブロックまたはテーブル表示が必要であり、position: fixed または position: absolute を含めることはできません。
• 垂直方向の配置はサポートされていません。

.box {
  width: 200px;
  height: 100px;
  margin: auto;
  background-color: #2196f3;
  color: white;
  text-align: center;
  line-height: 100px;
}

したがって、その適用性はシナリオ固有です。

方法 3: インラインブロック表示

このメソッドは、親 div の text-align: center と子 div の display: inline-block を結合します。これにより、子 div がインライン要素のように動作し、親のテキスト配置によって水平方向の中央揃えが可能になります。

.container {
  text-align: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  display: inline-block;
  background-color: #ff9800;
  color: white;
  padding: 20px;
  font-size: 20px;
}

margin: auto とは異なり、幅を定義する必要はありませんが、垂直方向の中央揃えはサポートされません。

方法 4: 2D 変換

2D 変換を使用すると、堅牢なソリューションが提供されます。要素の position を absolute に設定し、次に top: 50% と left: 50% を設定します。最後に、要素の寸法に基づいてオフセットに transform: translate(-50%, -50%) を適用します。

.container {
  position: relative;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e91e63;
  color: white;
  padding: 20px;
  font-size: 20px;
}

このメソッドは、他の要素に関係なく div を中央に維持し、オーバーレイに最適です。 ただし、幅と高さの定義は必要です。

方法 5: グリッド レイアウト

CSS グリッドは、非常に効率的なアプローチを提供します。

• 親コンテナを display: grid に設定します。
• 水平方向と垂直方向の両方の中央揃えには place-items: center を使用します。

.parent {
  display: grid;
  place-items: center;
}

長所: 幅/高さの指定は必要ありません。複数の要素に効果的です。 短所: 最新のブラウザのサポートが必要です (ただし、広くサポートされています)。

方法 6: テーブル表示

この古いメソッドは、親に display: table を使用し、子に display: table-cell と vertical-align: middle を使用します。 text-align: center は水平方向の配置を処理します。

.parent {
  display: table;
  width: 100%;
  height: 100%;
}
.child {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

方法 7: 位置相対変換

方法 4 のバリエーションで、親には position: relative を使用し、子には position: absolute、top: 50%、および left: 50% を含む translate(-50%, -50%) を使用します。

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  background-color: #4caf50;
  color: white;
  padding: 20px;
  font-size: 20px;
}

これにより、ネストされた要素を処理する際の制御が強化されます。

結論

このガイドでは、div センタリング手法の包括的な概要を説明します。 最適な方法は、特定の状況と必要な制御レベルによって異なります。 賢く選んでください！ さらに多くのコンテンツを得るには、LinkedIn、Bluesky、Medium に接続することを検討してください。

以上がCSS を使用して div を中央揃えにする 7 つの最も簡単な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。