CSSでセンタリングを設定するにはどうすればよいですか?一般的な手法の簡単な分析

Web デザインでは、特にレイアウトにおいて、センタリングは非常に一般的な要件です。 CSS には、中央揃えを実現するためのさまざまな方法が用意されています。最も一般的な方法のいくつかを見てみましょう。

1. 水平方向の中央揃え

1. text-align を使用する (ブロックレベル要素の場合)

text-align 属性は、ブロックレベルの内部テキストを水平方向に中央揃えにできます。たとえば、p、h1、h2 およびその他のタグのサンプル コードは次のとおりです:

div {
  text-align: center;
}

2. マージンを使用する (ブロック レベルの要素の場合)

margin 属性を使用すると、要素を中央に配置できます。ブロックレベル要素を水平に配置し、左右のマージンを追加する auto に設定するだけです サンプルコードは次のとおりです:

div {
  margin: 0 auto;
}

3. 位置と変換を使用します (ブロックレベル要素の場合)

位置属性と変換属性を使用すると、ブロック レベル要素の水平方向の中央揃えを実現できます。位置属性を絶対または固定に設定し、変換属性を使用して要素を 50% 左に移動する必要があります。サンプル コードは次のとおりです:

div {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

2. 垂直方向のセンタリング

1. line-height (インライン要素の場合)

line-height 属性を使用して垂直方向のセンタリングを実現します。インライン要素の値です。line-height の値をコンテナの高さに設定するだけです。サンプル コードは次のとおりです:

div {
  height: 100px;
  line-height: 100px;
}

2. フレックスボックスを使用します (ブロック レベル要素の場合)

Flexbox は CSS3 で導入されたレイアウトです このように、コンテナ上で display: flex を設定し、align-items: center を使用して要素を垂直方向の中央揃えにすることで、要素の垂直方向の中央揃えを簡単に実現できます。サンプル コードは次のとおりです:

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

3. 位置と変換を使用します (ブロック レベルの要素の場合)

位置属性と変換属性を使用すると、要素の垂直方向の中央揃えを実現することもできます。位置属性を絶対または固定に設定し、変換属性を使用して要素を 50% 上方に変換します。サンプル コードは次のとおりです:

div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

概要:

上記は、CSS で中央揃えを実現するためのいくつかの方法です。それぞれに独自の長所と短所があります。実現するために適切な方法を選択できます。さまざまな状況での目標。同時に、最新のブラウザーは CSS3 のサポートがますます向上しており、CSS3 のフレックスボックス レイアウトを使用することも非常に便利な選択肢です。

以上がCSSでセンタリングを設定するにはどうすればよいですか?一般的な手法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。