CSS 可変の幅と高さで垂直方向と水平方向の中央揃えを実現する 9 つの方法 (乾燥情報)

一般的な flex、transform、absolute などがあります。 CSS3 グリッド レイアウトもあります。疑似要素メソッドもあり、::after と ::before でもセンタリングを実現できます。

1. フレックス

誰もが最初に反応するのはフレックスかもしれません。記述方法がシンプルで直感的であり、互換性にも問題がないためです。携帯電話中心の第一候補です。

<div class="wrapper flex-center">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
}
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

2 つの主要な属性 (justify-content と align-items) を使用して、どちらも center に設定して中央揃えを実現します。

唯一の子要素を中央に配置するには、ここでの flex-center を親要素に掛ける必要があることに注意してください。

2. flex margin

これは flex メソッドの変形です。親要素は flex に設定され、子要素は margin: auto; に設定されます。子要素が周囲のマージンによって中央に「押し込まれている」ことがわかります。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: flex;
}
.wrapper > p {
    margin: auto;
}

3. 絶対変換

この組み合わせは、画像を中央に配置するためによく使用されます。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

もちろん、親要素ラッパーの相対位置を子要素 img に移動し、絶対位置を置き換えることもできます。効果も同様です。

4. table-cell

テーブルのセルの中央揃え効果を使用して表示します。 flex と同様に、親要素に記述する必要があります。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

5.絶対 4方向の値が等しい

絶対配置レイアウトを使用し、margin:auto;を設定し、値を設定します上、左、右、下が等しいだけです (すべて 0 である必要はありません)。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    position: relative;
}
.wrapper > p {
    width: 170px;
    height: 20px;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

このメソッドは通常、ポップアップ レイヤーに使用され、ポップアップ レイヤーの幅と高さを設定する必要があります。

6.writing-mode

このメソッドは、テキストの表示方向を縦方向に変更するなど、テキストの表示方向を変更することができます。

<div class="wrapper">
    <div class="wrapper-inner">
        <p>horizontal and vertical</p>
    </div>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    writing-mode: vertical-lr;
    text-align: center;
}
.wrapper > .wrapper-inner {
    writing-mode: horizontal-tb;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.wrapper > .wrapper-inner > p {
    display: inline-block;
    margin: auto;
    text-align: left;
}

互換性にはまだ小さな欠陥がいくつかありますが、携帯電話を含むほとんどのブラウザはすでに書き込みモードの書き込みをサポートしています。

7、グリッド

テーブルと同様、グリッド レイアウトを使用すると、行または列ごとに要素を整列できます。ただし、レイアウトの観点から見ると、グリッドはテーブルよりも可能であるか、単純です。

<div class="wrapper">
    <p>horizontal and vertical</p>
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    display: grid;
}
.wrapper > p {
    align-self: center;
    justify-self: center;
}

ただし、互換性の点では flex ほど優れていません。特に IE ブラウザでは、IE10 以降のみがサポートされています。

8. ::after

疑似要素もセンタリングを実現するために使用できますか?とても魔法のように感じられます。次の例を見てください。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    text-align: center;
}
.wrapper::after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}
.wrapper > img {
    vertical-align: middle;
}

水平方向は理解しやすいです。垂直方向では、img を中央まで引き下げた後:: と理解できます。

9, ::before

もう 1 つは、font-size: 0; と一緒に実行されるマジックです。

<div class="wrapper">
    <img src="test.png">
</div>

.wrapper {
    width: 300px;
    height: 300px;
    border: 1px solid #ccc;
    text-align: center;
    font-size: 0;
}
.wrapper::before {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    content: '';
    height: 100%;
}
.wrapper > img {
    vertical-align: middle;
    font-size: 14px;
}

font-size: 0; その秘密は、ラベル間の隙間をなくすことができることです。また、疑似要素は最も基本的なCSSの書き方に合わせて記述されているため、互換性の心配はありません。

推奨チュートリアル: 「CSS チュートリアル 」

以上がCSS 可変の幅と高さで垂直方向と水平方向の中央揃えを実現する 9 つの方法 (乾燥情報)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。