純粋なCSSを使用してセンタリングを実現する方法のまとめ

この記事では主に、純粋な CSS を使用して中央揃えを実現する 7 つの主要な方法を紹介します。これには、行の高さの中央揃え方法、表のセルの中央揃え方法、上下左右の配置 + マージンの中央揃え方法、50% の配置 + マージンが含まれます。センタリング方法、50% 位置決め + 平行移動センタリング方法、Flexbox センタリング方法、および Flexbox + マージンセンタリング方法を必要とする友人が参照して学ぶことができます。

前書き

就職面接中、面接官が CSS の質問をしたことを覚えています。ブラウザ ウィンドウ内で要素を上下左右の中央に配置する方法です。当時私が与えた答えは、まず JS を使用してブラウザ ウィンドウの高さを取得し、次にウィンドウの高さとして body に line-height を設定し、text-align:center を設定してから要素 display:inline- を設定したことを覚えています。ブロックして垂直方向に揃えます:middle。ため息、今考えただけで疲れてきました。

JS である必要がありますか? CSSだけを使って要素を中央揃えにする方法はないでしょうか？答えは「はい」です。そして、方法は複数あります。

1. 行の高さをセンタリングする方法

親要素: text-align: center; font-size: 0;

text-align: center; line-height:600px; font-size: 0;

子元素：display: inline-block; vertical-align: middle;
 

注：600px必须为父元素的高度，这里还需注意的一点是font-size需设为零，若未写该属性将导致元素并不能精确垂直居中。该方法即为我面试时所答的方法，缺点很明显，父元素高度须确定。（兼容IE8+）

二、table-cell居中法

父元素：display: table-cell; text-align: center; vertical-align: middle;

子元素：display: inline-block;
 

注：兼容IE8+

三、上下左右定位+margin居中法

父元素：position: relative;

子元素：position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;
 

注：兼容IE8+

四、50%定位+margin居中法

父元素：position: relative;

子元素：position: absolute; left: 50%; top: 50%; margin: -200px 0 0 -200px;
 

注：200px须为该子元素的宽高的一半。例如该子元素宽为100px，高为50px，那么margin取值为-25px 0 0 -50px。该方法缺点是须确定子元素宽高。（兼容IE8+）

五、50%定位+translate居中法

父元素：position: relative;

子元素：position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
 

注：该方法使用了CSS3 transform属性，适合用于移动端。（兼容IE9+）

六、Flexbox居中法

父元素：display: flex; justify-content: center; align-items: center;
 

注：该方法使用了Flexbox弹性布局，移动端兼容性也存在很大问题。（兼容IE10+）

七、Flexbox+margin居中法

父元素：display: flex;

子元素：margin: auto;子要素: display: inline-block;vertical-align: middle;

注: ここでもう 1 つ注意すべき点は、フォント サイズが必要であることです。ゼロに設定するには、この属性を書き込まないと、要素は垂直方向に正確に中央揃えされません。この方法は、私がインタビュー中に答えた方法です。欠点は明らかです。親要素の高さを決定する必要があります。 (IE8+ と互換性があります)

🎜2. テーブルセルの中央揃えメソッド🎜🎜🎜🎜親要素: display: table-cell:vertical-align: middle;🎜🎜子要素: display: inline-block;
🎜🎜🎜🎜注: 🎜🎜IE8+と互換性があります🎜🎜🎜🎜 3. 上下左右の配置 + 余白の中央揃え方法🎜🎜🎜親要素: 位置: 相対;🎜🎜子要素: 位置: 左: 0; 右: 0; マージン: 0;
🎜🎜🎜🎜注: 🎜🎜 IE8+🎜🎜🎜🎜 IV と互換性があります。50% 配置 + マージン中央揃え方式🎜🎜🎜🎜 親要素: position:相対; 🎜🎜子要素: position : 絶対; left: 50%; margin: -200px 0 0 -200px;
🎜🎜200px である必要があります子要素の幅と高さの半分。たとえば、子要素が幅 100 ピクセル、高さ 50 ピクセルの場合、マージンの値は -25px 0 0 -50px です。この方法の欠点は、子要素の幅と高さを決定する必要があることです。 (IE8+ と互換性があります) 🎜🎜🎜🎜 5. 50% 位置決め + 中央移動の方法🎜🎜🎜🎜親要素: position:相対;🎜🎜子要素: position: left: 50 %; トップ: 50%; 変換: 変換(-50%,-50%);
🎜🎜🎜🎜注: 🎜🎜このメソッドは、CSS3 変換属性を使用しており、モバイル端末に適しています。 (IE9+ と互換性があります) 🎜🎜🎜🎜 6. フレックスボックスの中央揃えメソッド 🎜🎜🎜🎜 親要素: display: flex: align-items: center;
🎜🎜 🎜 🎜注: 🎜🎜この方法は Flexbox の柔軟なレイアウトを使用しており、モバイル互換性にも大きな問題があります。 (IE10+対応) 🎜🎜🎜🎜7. Flexbox+マージンセンタリング方法🎜🎜🎜🎜親要素: display: flex;🎜🎜子要素: margin: auto; 🎜 🎜🎜🎜注: 🎜🎜上記と同じ、IE10+と互換性があります🎜

以上が純粋なCSSを使用してセンタリングを実現する方法のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。