CSSを中央揃えにする方法

CSS の中央揃え方法: 1. 水平方向の中央揃えには、ブロック レベルの要素には "text-align"、ブロック レベルの要素には "margin"、ブロックには "position" と "transform" を使用できます。レベル要素; 2. 垂直方向の中央揃えの場合、インライン要素には「line-height」、ブロックレベル要素には「flexbox」、ブロックレベル要素には「position」と「transform」を使用できます。

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

1. 水平方向の中央揃え

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

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

div {
text-align: center;
}

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

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

div {

margin: 0 auto;
}

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

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

div {

position:Absolute;
left:50%;
transform:translateX(-50%);
}

2. 垂直方向の中央揃え

1. line-height を使用する (インライン要素の場合)

line-height 属性を使用して、インライン要素を垂直方向に中央揃えにし、値を設定できます。コンテナへの line-height の高さ (ブロックレベル要素の場合)

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

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

}

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

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

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

概要:

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

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