CSS で要素を中央揃えにする N 通りの方法

序文

私が初めて働き始めたとき、面接官の一連の質問に完全に苦しめられたことを今でも鮮明に覚えています。 「テキストを中央揃えにするにはどうすればいいですか？」「テキストが複数行の場合はどうなりますか？」「ブロック レベル要素を水平方向に中央揃えにするにはどうすればいいですか？」「ブロック レベル要素を垂直方向に中央揃えにするにはどうすればいいですか？」 。 。たくさんの質問をされた後、私の心は混乱してしまい、自分が知っている質問にどう答えたらいいのかわからなくなってしまいました。センタリングは日常業務では避けられないシナリオであり、面接でも頻繁に登場します。この記事では、これらの問題に焦点を当て、当時の私と同じような疑問を抱いている学生が、将来の課題や面接でより安心して問題を取り上げられるようにしたいと考えています。

インライン要素の中央揃え

テキストを垂直に中央揃え

1行のテキストを垂直に中央揃えにする

これを行う最も簡単な方法は、1 行のテキストを垂直方向に中央揃えにすることです。行の高さをボックスの高さと同じに設定します。
ここで誤解があります。1行のテキストを中央揃えにする場合、多くの人がheightとline-heightを同じに設定します。実際にはheightを設定する必要はありません。line-heightを設定するだけです。このとき、ボックスの高さはline-heightによってサポートされており、line-heightとまったく同じです。

。中心 {
  // 高さを設定する必要はありません // height: 20px;
  行の高さ: 20px;
}

複数行のテキストを垂直に中央揃えする
1.垂直配置

vertical-align はインライン要素の垂直方向の配置を指定できます。

この方法では、中央に配置する必要があるコンテンツを囲むために、追加の .center 要素を追加する必要があります。親要素の line-height を要素の高さに設定し、中央揃えの子要素 ​​.center の表示を inline-block に設定して、インライン要素の特性を持たせます。line-height の継承のため、line-height: 20px; を設定して中央揃えの子要素の line-height をリセットし、vertical-align: middle; を設定して行ボックスの中央に垂直に配置します。

<div class="box">
 <div class="center">
  通行人A、B、C、Dの役を演じているにもかかわらず、あなたには生命と魂が残っています。
 </div>
</div>
<スタイル>
。箱 {
 背景色: オレンジ;
 行の高さ: 200px;
 幅: 300ピクセル;
}
。中心 {
 背景色: 緑;
 行の高さ: 20px;
 表示: インラインブロック;
 垂直位置合わせ: 中央;
}
</スタイル>

2.テーブルセル
インライン要素に vertial-align を設定すると現在の要素が垂直方向に中央揃えされますが、テーブルセル要素に vertial-align を設定すると、その子要素が垂直方向に中央揃えされます。子要素がブロックレベル要素であっても、垂直方向に揃えられます。したがって、この方法は、ブロックレベル要素を垂直方向に中央揃えする場合にも使用できます。

。箱 {
       高さ: 200px;
       表示: テーブルセル;
       垂直位置合わせ: 中央;
}

要素を水平方向に中央揃えにする

Text-align は、サブ行内の要素の水平方向の配置を制御します。これは非常に簡単で、text-align: center と設定するだけです。

。中心 {
       テキスト配置: 中央;
}

ブロックレベル要素を水平方向に中央揃えする

マージン値を自動に設定すると、対応する方向の残りのスペースをすべて占有できます。水平方向の両方のマージン値を自動に設定すると、残りのスペースが 2 つの方向に均等に分割され、中央揃えが実現されます。
では、なぜ垂直方向の中央揃えを実現するためにこの方法を使用しないのでしょうか?自動値が有効になるためには前提条件があり、つまり、対応する方向に特定の長さが設定されていない場合は、自動的に入力されます。明らかに、幅は親要素を埋めることができますが、高さは埋めることができません。

。中心 {
 マージン: 0 自動;
}

ブロックレベル要素を垂直中央に配置する

margin:auto; を使用して垂直方向の中央揃えを実現できますか?もちろんできます。writing-mode を変更してブロックを水平方向に流すことで、ブロックの流れを変更できます。この場合、高さ方向はデフォルトで埋められます。margin:auto; を設定すると、垂直方向の中央揃えを実現できます。ただし、この方法には副作用があります。writing-mode プロパティは継承可能であるため、この要素の下にあるすべての子要素のフロー方向が水平に変更されます。そして、この方法は水平方向のセンタリングには使用できなくなりました。

<div class="box">
    <div class="center"> 
        通行人A、B、C、Dの役を演じているにもかかわらず、あなたには生命と魂が残っています。
    </div>
</div>
<スタイル>
。箱 {
 背景色: オレンジ;
 高さ: 200px;
 書き込みモード: 垂直方向 (lr)
}
。中心 {
 背景色: 緑;
 高さ: 50px;
 マージン: 自動 0;
}
</スタイル>

この機能を使用して垂直方向と水平方向の両方の中央揃えを実現することは可能ですか?はい、できます。下を見続けましょう。

水平と垂直の中心

1.位置（幅と高さが固定された中央の要素）
親要素を絶対配置、中央配置要素を相対配置に設定します。上、右、下、左の値はすべて 0 です。特定の幅と高さを設定しないと、中央配置要素は親要素を水平方向と垂直方向の両方で埋めます。このとき、 margin:auto; で特定の幅と高さを設定すると、絶対的な中央揃えを実現できます。

この方法はIE8以降のブラウザにのみ対応していることに注意してください。プロジェクトをIE7と互換性を持たせる必要がある場合は、次の方法を使用できます。

。箱 {
 位置: 相対的;
}
。中心 {
 位置:絶対;
 幅: 200ピクセル;
 高さ: 200px;
 トップ:0;
 下:0;
 左:0;
 右:0;
 マージン: 自動;
}

2.垂直に揃える
まず、要素を水平方向に中央揃えし、要素の表示値を inline-clock に設定して、インライン要素の特性を持たせます。外側のボックス要素に text-align: center; を設定すると、中央揃えの要素が水平方向に中央揃えになります。
次に、垂直方向の中央揃えを実現するには、補助要素を追加し、補助要素の高さを 100% に設定して、現在の行ボックスの高さが親要素を満たすようにし、次に vertical-align: middle を設定して垂直方向の中央に揃える必要があります。

<div class="box">
    <div class="アシスト"></div>
    <div class="center"> 
        通行人A、B、C、Dの役を演じているにもかかわらず、あなたには生命と魂が残っています。
    </div>
</div>
<スタイル>
。箱 {
    背景色: オレンジ;
    高さ: 200px;
    幅: 500ピクセル;
    テキスト配置: 中央;
}
。中心 {
    背景色: 緑;
    幅: 150ピクセル;
    表示: インラインブロック;
    垂直位置合わせ: 中央;
}
.アシスト{
    表示: インラインブロック;
    高さ: 100%;
    垂直位置合わせ: 中央;
}
</スタイル>

3. ポジションとマージン
この方法は、中央に配置された要素の幅と高さがわかっている場合に適しています。親要素の相対的な位置と、中央揃え要素の絶対的な位置を設定します。左と上の値は両方とも 50% です。左と上の値は、それぞれ親要素の幅と高さを基準に計算されます。このとき、中央揃え要素の左上の頂点は、親要素の中央に配置されます。次に、中央揃えの要素の margin-left と margin-top をその幅と高さの負の半分に設定します。これにより、中央揃えの要素は水平方向に幅の 50% だけ左にオフセットされ、垂直方向に高さの 50% だけ上にオフセットされ、中央揃えの効果が得られます。

<div class="box">
    <div class="center"> 
        通行人A、B、C、Dの役を演じているにもかかわらず、あなたには生命と魂が残っています。
    </div>
</div>
<スタイル>
。箱 {
    背景色: オレンジ;
    高さ: 200px;
    幅: 500ピクセル;
    位置: 相対的;
}
。中心 {
    背景色: 緑;
    幅: 150ピクセル;
    高さ: 50px;
    位置:絶対;
    上位:50%;
    残り:50%;
    左マージン: -75px;
    上マージン: -25px;
}
</スタイル>

4. 変換による配置
4 番目の方法は、位置と変換を使用することです。この方法は原理的には前の方法と似ていますが、使用シナリオに固定されていない幅と高さを持つ要素を追加します。同様に、まず親要素の相対位置、中央揃え要素の絶対位置を設定し、左と上の値を50%に設定します。次に、中心要素の変換を設定します: traslate(-50%, -50%);、translate のパーセンテージ値はそれ自体を基準として計算され、中心要素は水平方向に幅の 50% 左にオフセットされ、垂直方向に高さの 50% 上方にオフセットされるため、中央揃え効果が得られます。

<div class="box">
    <div class="center"> 
        通行人A、B、C、Dの役を演じているにもかかわらず、あなたには生命と魂が残っています。
    </div>
</div>
<スタイル>
。箱 {
    背景色: オレンジ;
    高さ: 200px;
    幅: 500ピクセル;
    位置: 相対的;
}
。中心 {
    背景色: 緑;
    幅: 150ピクセル;
    位置:絶対;
    上位:50%;
    残り:50%;
    変換: 変換(-50%, -50%);
}
</スタイル>

5.フレックス
IE9 以前のブラウザとの互換性を考慮する必要がない場合は、フレックス レイアウトが最も推奨される方法です。
親要素をフレックス コンテナーに設定し、主軸と交差軸の配置を中央に設定します。 flex に関する関連知識については、Ruan 氏のブログで詳しく紹介されていますので、参照してください。

。箱 {
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
}

これで、CSS で要素を中央揃えにする N 通りの方法についての記事は終了です。CSS で要素を中央揃えする方法の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。