この記事では主に CSS を使用してコンテナを水平方向と垂直方向に中央揃えにする 7 つの方法を詳しく紹介します。興味のある方は参考にしてください。
この種の CSS レイアウトは一般的に使用されており、よく聞かれる質問があり、その多くはネット上で見つけることができますが、それでも自分でまとめておきたいと思います。
この種の方法はたくさんありますが、この記事では印象を深めるためにそれらのいくつかを要約します。
レンダリングはすべて次のようになります:
方法 1: 位置とマージン
XML/HTML コードコンテンツをクリップボードにコピーします
< プ クラス = "ラップ" p
/**css**/ . Wrap { width: 200px ; 身長: 200px; 背景
:位置: } .wrap .center
{高さ
:緑
;
: 左: 0; 上: 0;下
} 互換性: すべての主要なブラウザーがサポートしていますが、IE6 はサポートしていません 方法 2: diaplay: table-cell
XML/HTML コード< p class= "wrap"> > ; p
CSS コード
コンテンツをクリップボードにコピー
/ *&/
.wrap{200px; 背景
:垂直整列; : 中央 ; -整列: 中央;
} .center{ display: inline-block; vertical-align: width: 100px; : 100ピクセル; : green; }
XML/HTML コード
コンテンツをクリップボードにコピー
<
class="w rap" &g t ;
p > .wrap { 位置: 相対; 背景: 黄色; 幅: 200ピクセル
;;} .center { position: absoluteback;
green互換性: IE9 以下では変換がサポートされていないため、モバイル版のパフォーマンスが向上します。
方法 4:
flex;align-items: center;justify-content: center
コンテンツをクリップボードにコピー <p クラス=「ラップ」> p クラス= 「センター」 > p>
>
CSSコードコンテンツをクリップボードにコピー
/* css */ .wrap { 背景: 黄色; 高さ: 200ピクセル; ; 整列アイテム: センター ; justify-content: center; height }
方法 5: display:flex; margin:autoXML/HTML コードコンテンツをクリップボードにコピー
class=「ラップ」> <p class > > p> CSS コードコンテンツをクリップボードにコピーします/* css */ .wrap { 背景: : 200ピクセル; ディスプレイ: 緑 : 100ピクセル ; マージン: } 方法 6: 純粋な位置 <p class="wrap" クラス > p> p> コンテンツをクリップボードにコピー /* css */ .wrap { 背景: 黄色; 幅: 高さ: 位置; 親戚} /**方法 1**/ .センター 緑; 幅: 100px;ピクセル; 左: 50px; トップ: } /**方法 2**/; 絶対幅: 100ピクセル; 左: 50%; マージン左: -50ピクセル 互換性: すべてのブラウザに適用可能メソッド6のメソッド1の計算式は次のとおりです: 子要素(conter)の左の値の計算式: left= (親要素の幅 - 子要素の幅) / 2=(200-100) / 2=50px;子要素(conter)のトップ値の計算式:top=(親要素の高さ - 子要素の高さ) ) / 2=(200-100) / 2=50px;方法2の計算式:leftの値は50%に固定;子要素のmargin-left= -(子要素の幅/2)=-100/ 2 = -50px;上の値は同じで、50%に固定子要素のマージン-トップ= - (子要素の高さ/2) =-100/2= -50px;方法 7: 互換性以前のバージョンのブラウザでは、幅と高さが固定されていませんXML/HTML コードコンテンツをクリップボードにコピーします p "テーブル" > クラス= 「コンテンツ」 修正なし幅と高さ、適応型 p>
「センター」
:
;
=
<
p
p>
CSS コードコンテンツをクリップボードにコピーします
/*css*/ table { height: 200px ;/*高さの値をそれより小さくすることはできません*/ width: 200px;/*width の値をこれより小さくすることはできません*/ display: table;
position:left; 黄色;
} .tableCell { display: table-cell; vertical-align: text-align: ;
:パディング: 10px } .content {
*相対; : -50%
}
まとめ
モバイルデバイスの場合は、方法4と方法5を使用する方が便利です。また、固定されていない幅と高さもサポートしており、高速、正確、無慈悲ですクリップボード
p
"wrap"
>
p
クラス="センター">
p>
p> ;
CSS コードコンテンツをクリップボードにコピーします/* css */ .wrap { background: yellow
:高さ: 200px ; display: align-items: justify
-center
;100px
;
: }
または display:flex;margin:auto; XML/HTML コード コンテンツをクリップボードにコピーします <p class="wrap"
>< p クラス =「センター」>
p
CSS コード コンテンツをクリップボードにコピーします
/* css */ .wrap { background: yellow: 200px height; : 200ピクセル;ディスプレイ: }.センター
{幅: 自動; } PCの場合は互換性を考慮する必要があります。方法6は良い、つまり純粋な位置です。
< クラス
=> gt;
< /* css */ .wrap { 背景: 黄色; 幅: 200px;
高さ;位置: 相対; /**方法 1**/ .中心 { 背景: 緑; : 100ピクセル ; 高さ:
100px: 50px ; &*/
.背景
:位置
:
: 高さ: 左; : 50%
マージン左; margin-top:-50px; PC側の中央要素の高さが固定されていない場合は、方法7を使用しますコードはコピーされません。 縦方向の CSS 要素を本当に合計したい場合は、10 または 20 種類以上あるはずです。ただし、一般的な理解があり、使用時に副作用がない限り、すべてをマスターする必要はありません。
以上がCSS を使用してコンテナを水平方向と垂直方向の中央に配置する 7 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。