CSSを完全に活用して要素を中央に配置する

今回は、CSSを最大限に活用して要素の中央揃えを実現するための注意事項と、CSSを使用して要素の中央揃えを実現するための

注意事項

についてお届けします。以下に実際のケースを示しますので、見てみましょう。 前書き

就職面接中、面接官が CSS の質問をしたことを覚えています。ブラウザ ウィンドウ内で要素を上下左右の中央に配置する方法です。当時私が与えた答えは、まず JS を使用してブラウザウィンドウの高さを取得し、次にウィンドウの高さとして body に line-height を設定し、text-align:center を設定してから要素を設定するというものであったことを覚えていますdisplay:inline-block と

vertical-align

:middle です。ため息、今考えただけで疲れてきました。

JS である必要がありますか? CSSだけを使って要素を中央揃えにする方法はないでしょうか？答えは「はい」です。そして、方法は複数あります。 1. 行の高さをセンタリングする方法

text-align: center; line-height:600px; <a href="http://www.php.cn/wiki/807.html" target="_blank">font-size</a>: 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居中法

父元素：<a href="http://www.php.cn/wiki/902.html" target="_blank">position</a>: 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;親要素: font-size
: 0;

子要素: display: inline-block;vertical-align: middle;

注:

600px は親要素の高さである必要があります。ここでもう 1 つ注意すべき点は、この属性が記述されていない場合、要素は垂直方向に正確に中央揃えされないということです。この方法は、私がインタビュー中に答えた方法です。欠点は明らかです。親要素の高さを決定する必要があります。 (IE8+ と互換性があります)

🎜🎜🎜2. テーブルセルの中央揃えメソッド🎜🎜🎜🎜親要素: display: table-cell:vertical-align: middle;🎜🎜子要素: display: inline-block;🎜 🎜🎜🎜🎜注: 🎜🎜IE8+と互換性があります🎜🎜🎜🎜3. 上下左右配置+余白中央揃え方式🎜🎜🎜 🎜親要素: position🎜:相対;🎜🎜子要素: 位置: 絶対; 左: 0; 上: 0; マージン: 自動; 要素: <code>位置: 相対;左: 50%; 上: 50%; マージン: -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; 🎜 🎜🎜🎜🎜🎜🎜🎜 この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 🎜🎜推奨読書: 🎜

詳しい説明内に焦点を当てる

疑似要素::前と::後の詳細な説明

font-size-adjust 属性が Web ページのレイアウトを最適化する方法

以上がCSSを完全に活用して要素を中央に配置するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。