一般的な 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 サイトの他の関連記事を参照してください。