CSS による要素の中央揃えの原理の分析

CSS で要素の水平方向と垂直方向の中心を設定することは、非常に一般的な要件です。しかし、理論的には実装が非常に簡単に思えても、実際には多くの人が困惑することがよくあります。

要素を水平方向に中央揃えするのは比較的簡単です。インライン要素の場合は、その親に text-align: center を適用します。ブロックレベル要素の場合は、それ自体に margin: auto を適用します。

しかし、要素を垂直方向に中央揃えにしたい場合は、それほど簡単ではなく、考えただけで頭が麻痺してしまうこともあります。

この記事では、インライン要素とブロックレベル要素をそれぞれ説明し、現在人気のある実装方法を収集し、実装の原則を分析して、ユーザーの便宜を図ります。ここで注意すべきことは、完璧な方法は存在しないということです。重要なのは、自分のニーズを検討し、どの実装方法が最も適切かを分析することです。

インライン要素

まず、基本的なコードを書いてみましょう。

<div class="main">
    <span class="content">インライン要素 span を中央揃えにしたい</span>
</div>

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;
}

。コンテンツ {
    背景色: #5b4d4e;
    色: #FFFFFF;
}

.main クラスの div は、.content クラスのインライン要素 span をラップします。目標は、.content 要素を .main 要素の中央に配置することです。

水平中央

テキスト配置

インライン要素を水平方向に中央揃えするのは比較的簡単です。.main に text-align: center; を追加するだけです。.main は次のようになります。

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;
    
    text-align: center; /* 水平方向の中央揃え */
}

実装原則: text-align の値を center に設定します。この属性は要素内のテキストの水平方向の配置を指定するため、center に設定するとテキストは水平方向に中央揃えになります。

垂直中央

行の高さ

インライン要素の垂直方向の中央揃えを、1行と複数行、あるいは画像などの置換要素に分けて説明します。

行の場合は、line-height を使用して実現できます。この場合、.main 要素の CSS コードは次のようになります。

。主要 {
    幅: 300ピクセル;
    高さ: 300px; /* オプション*/
    背景色: #50ba8b;

    line-height: 300px; /* 垂直中央 */
}

実は、line-height を設定するとテキストを垂直方向に中央揃えにすることができ、同時に height を設定する必要はありません。これも昔からある誤解です。

実装原理: この方法は、CSS の「行間隔の均等分割メカニズム」を使用して垂直方向の中央揃えを実現します。このため、この方法が 1 行のテキストにのみ適用可能であることも説明できます。

説明する必要があるもう 1 つの点は、この方法で実現される垂直方向の中央揃えは「近似」であり、完璧ではないということです。これは、テキスト グリフの垂直方向の中心線が、実際の「行ボックス」の垂直方向の中心線よりも一般的に低く、通常使用するフォント サイズが比較的小さいため、この偏差を検出するのは容易ではなく、垂直方向の中央揃えとして認識されるためです。

行の高さと垂直方向の配置

次に、複数の行や画像などの置換要素を垂直方向に中央揃えする方法について説明します。これを実現するには、line-height と vertical-align の両方を使用する必要があります。

まずテキストを折り返します:

<div class="main">
    <span class="content">
        インライン要素のスパンを中央揃えにしたい <br>
        インライン要素のスパンを中央にしたい
    </span>
</div>

変更された CSS コードを見てみましょう。

。主要 {
    幅: 300ピクセル;
    背景色: #50ba8b;

    行の高さ: 300px;
}

。コンテンツ {
    表示: インラインブロック;
    背景色: #5b4d4e;
    色: #FFFFFF;
    行の高さ: 20px;
    マージン: 0 20px;
    垂直位置合わせ: 中央;
}

実施原則：

• .content 要素の表示を inline-block に設定します。その機能は、インライン要素の特性を維持しながら外部の行の高さを通常のサイズにリセットし、vertical-align 属性を設定して非常に重要な「行ボックス」を生成できるようにすることです。実際に必要なのは、この「行ボックス」ではなく、各「行ボックス」に付属する製品、つまり「ゴースト空白ノード」、つまり通常の文字のように動作する幅 0 の目に見えない「ノード」です。この「ゴースト空白ノード」により、line-height: 300px; には作用するオブジェクトが与えられ、これは .content 要素の前に高さ 300px、幅 0 のインライン要素を配置するのと同等になります。
• インライン要素はデフォルトでベースライン揃えになっているため、.content 要素に vertical-align: middle; を設定して複数行のテキストの垂直位置を調整し、目的の「垂直中央揃え」効果を実現します。この方法は、画像などの置換要素の垂直方向の中央揃え効果にも適しています。もちろん、ここでの「垂直方向の中央揃え」も近似値であり、vertical-align によって生じます。具体的な理由については、vertical-align: middle; について詳しく知ることができます。

ブロックレベル要素

まずは基本的なコードを書いてみましょう:

<div class="main">
    <div class="content">ブロックレベルのdivを中央に配置したい</div>
</div>

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;
}

。コンテンツ {
    幅: 150ピクセル;
    高さ: 150px;
    背景色: #5b4d4e;
}

.main クラスの div は、.content クラスのブロック レベルの div をラップします。目標は、.content 要素を .main 要素の中央に配置することです。

位置 + 余白: 自動

実装コードは次のとおりです。

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;
    
    /*キーコード*/
    位置: 相対的;
}

。コンテンツ {
    幅: 150ピクセル;
    高さ: 150px;
    背景色: #5b4d4e;

    /*キーコード*/
    位置: 絶対;
    上: 0;
    左: 0;
    下部: 0;
    右: 0;
    マージン: 自動;
}

実施原則：

1. .main 要素を相対配置 position: relative; に設定して、その子要素が絶対配置されたときにその要素に対して相対的になるようにします。
2. 次に、.content 要素を絶対位置 position: absolute; に設定し、上、左、下、右を 0 に設定します。このように、要素のサイズは「フォーマットされた幅とフォーマットされた高さ」として表現され、<div> の「通常のフローの幅」と同じです。これは外部サイズに属し、つまり、サイズは親要素の使用可能なサイズを自動的に埋めます。ただし、この時点で .content 要素の幅と高さを設定したため、要素が自動的に埋められることは制限され、150 px の余分なスペースがあります。
3. 最後に、.content要素にmargin: auto;を設定します。このとき、autoの計算ルールに従って、上下左右の残りのスペースを均等に分割するので、自然に中央揃えになります。

位置 + 左/上余白

実装コードは次のとおりです。

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;
    
    /*キーコード*/
    位置: 相対的;
}

。コンテンツ {
    幅: 150ピクセル;
    高さ: 150px;
    背景色: #5b4d4e;

    /*キーコード*/
    位置: 絶対;
    上位: 50%;
    左: 50%;
    左マージン: -75px;
    上マージン: -75px;
}

実施原則：

1. .main 要素を相対配置 position: relative; に設定して、その子要素が絶対配置されたときにその要素に対して相対的になるようにします。
2. 次に、.content 要素を絶対配置 (position: absolute;) に設定し、top: 50%;、left: 50%; を設定して、.content 要素の左上隅が .main 要素の中央に配置されるようにします。
3. 最後に、.content 要素の margin-left: -75px; と margin-top: -75px; を設定して、要素自体を幅と高さの半分だけ左と上に移動します。こうすることで、.content 要素の中心が .main 要素の中心になり、自然に中央揃え効果が得られます。
4. この方法の欠点は、.content 要素の幅と高さを固定する必要があることです。

位置 + 翻訳

実装コードは次のとおりです。

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;
    
    /*キーコード*/
    位置: 相対的;
}

。コンテンツ {
    幅: 150ピクセル;
    高さ: 150px;
    背景色: #5b4d4e;

    /*キーコード*/
    位置: 絶対;
    上位: 50%;
    左: 50%;
    変換: translate(-50%, -50%);
}

実施原則：

1. .main 要素を相対配置 position: relative; に設定して、その子要素が絶対配置されたときにそれに対して相対的になるようにします。
2. 次に、.content 要素を絶対配置 (position: absolute;) に設定し、top: 50%;、left: 50%; を設定して、.content 要素の左上隅が .main 要素の中央に配置されるようにします。
3. 最後に、.content 要素の transform: translate(-50%, -50%); を設定して、.content 要素を幅と高さの半分だけ左と上に移動し、.content 要素の中心が .main 要素の中心に来るようにして、自然に中央揃え効果を実現します。
4. この方法の利点は、.content 要素に固定の幅と高さを必要としないことです。

フレックスボックス

実装コードは次のとおりです。

。主要 {
    幅: 300ピクセル;
    高さ: 300px;
    背景色: #50ba8b;

    /*キーコード*/
    ディスプレイ: フレックス;
}

。コンテンツ {
    幅: 150ピクセル;
    高さ: 150px;
    背景色: #5b4d4e;

    /*キーコード*/
    マージン: 自動;
}

実施原則：

• .main 要素の display: flex; を設定します。
• 次に、中央揃えを実現するために、.content 要素を margin: auto; に設定します。
• これは間違いなく最善の解決策です。.content 要素を絶対位置に設定する必要はありません。margin: auto は幅と高さに自然に作用し、Flexbox はこの種のニーズに合わせて特別に設計されているため、.content 要素の幅と高さを設定する必要はありません。
• 欠点は、現在のブラウザのサポートが他の方法よりも低いことです。

Flexbox のもう 1 つの利点は、匿名コンテナー (タグで囲まれていないテキスト ノードなど) を垂直方向に中央揃えできることです。たとえば、.main 要素を display: flex; に設定する代わりに、.content 要素を display: flex; に設定し、Flexbox 仕様で導入された align-items プロパティと justify-content プロパティを使用して、その内部のテキストを中央に配置することもできます (.main 要素で同じプロパティを使用して .content 要素を中央に配置することもできますが、これは margin: auto メソッドよりもエレガントであり、フォールバックとしても機能します)。

。コンテンツ {
    幅: 150ピクセル;
    高さ: 150px;
    背景色: #5b4d4e;

    /*キーコード*/
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの中央揃え: 中央;
    マージン: 自動;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。