CSS で垂直方向の中央揃えを行う 7 つの方法の詳細なコード例

レイアウトを編集するとき、通常は水平センタリングと垂直センタリングを使用してデザインします。水平センタリングは扱いが簡単です。margin:0 auto; または text-align:center; を設定するだけで、水平センタリングの問題を簡単に解決できます。ただし、最も厄介な配置の問題は、常に「垂直センタリング」の面倒な設定でした。以下では、CSS を使用して簡単に垂直センタリングを使用する 7 つの方法を紹介します。

垂直方向に中央揃えする7つの方法

1. 行の高さの設定
2. 疑似要素の追加
3. calc 動的計算
4. テーブルまたは模造テーブルを使用する
5. 変身
6. 絶対位置指定
7. フレックスボックスの使用

行の高さの設定

line-height を設定することは、何かを垂直方向に中央揃えする最も簡単な方法です。これは、1 行のタイトルや、inline-block 属性に設定された div などの「1 行の」インライン要素 (inline、inline-block) に有効です。line-height を高さと同じ値に設定すると、コンテンツのインライン要素が垂直方向に中央揃えされます。これは行の高さであるため、行の高さの 1/2 がインライン要素の上部と下部に追加され、垂直方向に中央揃えされます。しかし、このことから、単一行のインライン要素が必要な理由がわかります。複数行の場合、2 行目と 1 行目の間の距離が大きくなりすぎて、期待した効果が得られないからです。 CSSの例:

.div0
{  
幅:200px;  
高さ:150px;  
境界線:1px実線 #000;  
行の高さ:150px;  
テキスト配置:中央;
}
.redbox
{  
表示:インラインブロック; 
 幅:30px; 
 高さ:30px; 
 背景:#c00;}

疑似要素を追加する (::before、::after)

最初の方法は最も簡単な方法（1 行のタイトルに適しています）ですが、1 行にしか機能しません。そのため、複数行の要素を垂直方向に中央揃えにしたい場合は、疑似要素を使用する必要があります。その前に、まずは CSS の vertical-align プロパティについて説明します。このプロパティは垂直方向の中央揃えですが、要素内のすべての要素が、外枠の高さを基準に垂直方向に中央揃えされるのではなく、互いに垂直方向に中央揃えされることを意味します。 (次の CSS はこの垂直方向の中央揃えを作成します)

.div0{
  幅:200px;
  高さ:150px;
  境界線:1px実線 #000;
  テキスト配置:中央;
}
.redbox{
  幅:30px;
  高さ:30px;
  背景:#c00;
  表示:インラインブロック;
  垂直位置揃え:中央;
}
.greenbox{
  幅:30px;
  高さ:60px;
  背景:#0c0;
  表示:インラインブロック;
  垂直位置揃え:中央;
}
.bluebox{
  幅:30px;
  高さ:40px;
  背景:#00f;
  表示:インラインブロック;
  垂直位置揃え:中央;
}

したがって、1 つのブロックの高さが 100% になると、他のブロックは垂直方向に中央揃えになります。

.greenbox{
  幅:30px;
  高さ:100%;
  背景:#0c0;
  表示:インラインブロック;
  垂直位置揃え:中央;
}

しかし、垂直方向に中央揃えしたいときに、いつも奇妙な div を追加できるわけではありません。したがって、「疑似要素」を使用し、::before と ::after を使用してレバーに div を追加し、この「疑似」 div の高さを 100% にして、他の div を簡単に中央に配置できるようにする必要があります。でもでもでも！ div の表示を inline-block に設定することを忘れないでください。結局のところ、vertical-align: middle はインライン要素用であり、div 自体はブロックなので、変更する必要があります。

.div0::before{
  コンテンツ：'';
  幅:0;
  高さ:100%;
  表示:インラインブロック;
  位置:相対;
  垂直位置揃え:中央;
  背景:#f00;
}

calc 動的計算

これを見ると疑問が湧くかもしれません。div を今日ブロックにする必要がある場合、垂直方向に中央揃えにするにはどうすればよいでしょうか?このとき、CSS 独自の calc 動的計算機能を使用する必要があります。垂直方向の中央揃えを実現するには、中央揃えにする div の top 属性を上から「外枠の高さの 50% + div の高さの 50%」の距離に設定するだけです。margin-top を使用しない理由は、margin が水平方向の幅に相対的であるため、正しくするには top を使用する必要があるためです。

.div0{
  幅:200px;
  高さ:150px;
  境界線:1px実線 #000;
}
.redbox{
  幅:30px;
  高さ:30px;
  背景:#c00;
  フロート:左;
  上:calc(50% - 15px);
  左余白:calc(50% - 45px);
}
.greenbox{
  幅:30px;
  高さ:80px;
  背景:#0c0;
  フロート:左;
  上:calc(50% - 40px);
}
.bluebox{
  幅:30px;
  高さ:40px;
  背景:#00f;
  フロート:左;
  上:calc(50% - 20px);
}

テーブルまたは模造テーブルを使用する

おそらく、HTML テーブルでよく使用される DOM で垂直方向の中央揃えを実現するのは非常に簡単だと思われる方もいるでしょう。必要なのは vertical-align: middle の行だけです。なぜでしょうか?主な理由は、table の display は table であるのに対し、td の display は table-cell であるためです。そのため、table を直接使用するだけでなく、要素の親要素の display を table-cell に垂直中央揃えに変更することもできます。これは簡単に実現できます。ただし、display を変更すると、他のスタイル属性にも連鎖効果が発生する場合があるため、使用時にはより注意する必要があります。

HTML:

<テーブル>
    <tr>
        <td>
            <div>テーブルを垂直に中央揃え</div>
        </td>
    </tr>
</テーブル>
<div class="like-table">
    <div>垂直中央に誤ったテーブルを配置</div>
</div>

CS: ...

.like-table{
    表示:テーブルセル;
}
td、
.like-table{
    幅:150ピクセル;
    高さ:100px;
    境界線:1px実線 #000;
    垂直位置合わせ: 中央;
}
td div、
.like-table div{
    幅:100ピクセル;
    高さ:50px;
    マージン:0 自動;
    色:#fff;
    フォントサイズ:12px;
    行の高さ: 50px;
    テキスト配置: 中央;
    背景:#c00;
}
.like-table div{
    背景:#069;
} 

変身

Transform は CSS3 の新しい属性で、主に要素の変形、回転、変位を制御します。transform の translateY (垂直変位を変更します。単位としてパーセンテージを使用する場合は、要素自体の長さと幅に基づきます) を使用し、要素自体の top 属性と組み合わせることで、垂直中央揃えの効果を実現できます。注意する必要があるのは、子要素を position:relative で追加する必要があることです。そうしないと効果がありません。

.use-transform{
    幅:200px;
    高さ:200px;
    境界線:1px実線 #000;
}
.use-transform div{
    位置: 相対的;
    幅:100ピクセル;
    高さ:50px;
    上位:50%;
    変換:Y座標を-50%に変更します。
    背景:#095;
} 

絶対位置指定

絶対配置は CSS の position:absolute で、絶対位置を使用して指定します。ただし、垂直方向の中央揃えの方法は、従来の絶対位置とは異なります。上、下、左、右の値を 0 に設定し、margin:auto を使用して垂直方向の中央揃えを実現します。ただし、絶対位置の子要素の場合、親要素の位置は相対的に指定する必要があることに注意してください。さらに、絶対配置された要素は互いに重なり合うため、コンテンツ要素が多い場合は問題が発生する可能性があります。

.use-absolute{
    位置: 相対的;
    幅:200px;
    高さ:150px;
    境界線:1px実線 #000;
}
.use-absolute div{
    位置: 絶対;
    幅:100ピクセル;
    高さ:50px;
    トップ:0;
    右:0;
    下:0;
    左:0;
    マージン:自動;
    背景:#f60;
} 

フレックスボックスの使用

align-items または align-content プロパティを使用すると、垂直方向の中央揃えの効果を簡単に実現できます。

.use-flexbox{
    ディスプレイ:フレックス;
    アイテムを中央揃えにします。
    コンテンツを中央揃えにする。
    幅:200px;
    高さ:150px;
    境界線:1px実線 #000;
}
.use-flexbox div{
    幅:100ピクセル;
    高さ:50px;
    背景:#099;
} 

上記は垂直方向の中央揃えの方法です。垂直方向の中央揃えは多くの場合、display 属性の変更を伴うため、レイアウトに何らかの影響を与えることがよくあります。たとえば、flexbox を使用すべきでないところで flexbox を使用したり、table を使用すべきでないところで table を使用したり、inline-block を使用すべきでないところで inline-block を使用したりすると、後で修正するために他の多くの配置スタイルを記述する必要があり、本末転倒です。したがって、これらの CSS 垂直方向の中央揃え方法をどのように活用するかは、レイアウト構造によって異なりますので、柔軟に活用してください。

要約する

以上が、私が紹介した CSS で垂直方向の中央揃えを実装する 7 つの方法についての詳細な説明です。お役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。すぐに返信します。