CSS を使用してコンテナを水平方向と垂直方向の中央に配置する 7 つの方法

この記事では主に CSS を使用してコンテナを水平方向と垂直方向に中央揃えにする 7 つの方法を詳しく紹介します。興味のある方は参考にしてください。

この種の CSS レイアウトは一般的に使用されており、よく聞かれる質問があり、その多くはネット上で見つけることができますが、それでも自分でまとめておきたいと思います。
この種の方法はたくさんありますが、この記事では印象を深めるためにそれらのいくつかを要約します。
レンダリングはすべて次のようになります:

方法 1: 位置とマージン

XML/HTML コードコンテンツをクリップボードにコピーします

1. < プ クラス = "ラップ" p

>

2. /**css**/ . Wrap { width: 200px ; 身長: 200px; 背景

   :
黄色
3. ;

   位置: } .wrap .center

   {
幅
4. ;

   高さ

   :
100ピクセル

; :

緑
;

位置

: 左: 0; 上: 0;下

下
1. : 0 ;

   } 互換性: すべての主要なブラウザーがサポートしていますが、IE6 はサポートしていません 方法 2: diaplay: table-cell

   XML/HTML コード
2. コンテンツをコピーするクリップボードへ

   < p class= "wrap"> > ; p

>

CSS コード

コンテンツをクリップボードにコピー

/ *&#&/

.wrap{

幅
1. :

   200px; 背景

   :
黄色
2. :

   垂直整列; : 中央 ; -整列: 中央;

3. } .center{ display: inline-block; vertical-align: width: 100px; : 100ピクセル; : green; }

5. 互換性: display:table-cell のため、IE67 は互換性がありません

方法 3:

位置と変換

XML/HTML コード

コンテンツをクリップボードにコピー

1. <

p

2. class="w rap" &g t ;

3. p > .wrap { 位置: 相対; 背景: 黄色; 幅: 200ピクセル

   ;
:
4. 200px

   ;} .center { position: absoluteback;

   green
:50%; -webkit-transform:翻訳( -50%,-50%); 変換:translate(-50%,-50%);

5. 互換性: IE9 以下では変換がサポートされていないため、モバイル版のパフォーマンスが向上します。

方法 4:
flex;align-items: center;justify-content: center

XML/HTML コード

1. コンテンツをクリップボードにコピー <p クラス=「ラップ」> p クラス= 「センター」 > p>

p

3. >

CSSコードコンテンツをクリップボードにコピー

1. /* css */ .wrap { 背景: 黄色; 高さ: 200ピクセル; ; 整列アイテム: センター ; justify-content: center; height }

2. 方法 5: display:flex; margin:autoXML/HTML コードコンテンツをクリップボードにコピー

<

p

class=「ラップ」>

<p class

=

「センター」

1. >

p

2. > p>

3. CSS コードコンテンツをクリップボードにコピーします/* css */ .wrap { 背景:

   黄色
;
4. 幅

   : 200ピクセル; ディスプレイ:

   } .
背景

:

緑
;

幅

: 100ピクセル ; マージン:

1. } 方法 6: 純粋な位置

   XML/HTML コード
2. コンテンツをコピークリップボードに

   <p class="wrap"

   >
p

4. クラス

   =
「センター」

>

p>

p>

2. CSS コード

   コンテンツをクリップボードにコピー

   1. /* css */ .wrap { 背景: 黄色; 幅: 高さ: 位置; 親戚} /**方法 1**/ .センター

      {
   背景
   2. :

      緑; 幅: 100px;ピクセル; 左: 50px; トップ: } /**方法 2**/; 絶対幅: 100ピクセル; 左: 50%; マージン左: -50ピクセル

      ;
   3. }

   4. 互換性: すべてのブラウザに適用可能メソッド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 コードコンテンツをクリップボードにコピーします

   <

   6. p

   クラス
   =

   "テーブル"

   >
   
   
   
   
   
   <
   

   p

   クラス= 「コンテンツ」

   >

   修正なし幅と高さ、適応型
   

   p>

1. p

>

2. p>

3. CSS コードコンテンツをクリップボードにコピーします

4. /*css*/ table { height: 200px ;/*高さの値をそれより小さくすることはできません*/ width: 200px;/*width の値をこれより小さくすることはできません*/ display: table;

   position
:
5. float

   :left; 黄色;

6. } .tableCell { display: table-cell; vertical-align: text-align: ;

   :
絶対
7. ;

   パディング: 10px } .content {

   *
位置
8. :

   相対; : -50%

9. }
11. とりあえず上記の7つの方法をまとめると、実は方法が多すぎるので、そのうちの1つか2つを慣れれば十分です。

    まとめ

    モバイルデバイスの場合は、方法4と方法5を使用する方が便利です。また、固定されていない幅と高さもサポートしており、高速、正確、無慈悲です
つまり、 flex; align-items: center; justify-content: center; を使用します
XML/HTML コード

13. クリップボード

<

15. p

class

=

"wrap"

>

<

p

クラス="センター">

p>

p> ;

CSS コードコンテンツをクリップボードにコピーします/* css */ .wrap { background: yellow

:

2 00px

;

高さ: 200px ; display: align-items: justify

-

content

} .

center

;

緑色; :

100px
;

高さ

: }

1. または display:flex;margin:auto; XML/HTML コード コンテンツをクリップボードにコピーします <p class="wrap"

   >

2. < p クラス =「センター」>

   p
3. >

p

&g t;

1. CSS コード コンテンツをクリップボードにコピーします

   1. /* css */ .wrap { background: yellow: 200px height; : 200ピクセル;ディスプレイ: }.センター

      {
   背景
   2. :

      幅: 自動; } PCの場合は互換性を考慮する必要があります。方法6は良い、つまり純粋な位置です。

   3. XML/HTML コード
      コンテンツをクリップボードにコピー

   
   

   < クラス

   =
   " Wrap"

   1. > gt;

   2. < /* css */ .wrap { 背景: 黄色; 幅: 200px;

      高さ
   :
   3. 200ピクセル

      ;位置: 相対; /**方法 1**/ .中心 { 背景: 緑; : 100ピクセル ; 高さ:

      100px
   ;
   4. 左

      : 50px ; &*/

      .
   センター
   5. {

      背景

      :
   緑
   ;

   位置
   :

   幅

   : 高さ: 左; : 50%

   マージン左
   :-
   1. 50px

      ; margin-top:-50px; PC側の中央要素の高さが固定されていない場合は、方法7を使用しますコードはコピーされません。 縦方向の CSS 要素を本当に合計したい場合は、10 または 20 種類以上あるはずです。ただし、一般的な理解があり、使用時に副作用がない限り、すべてをマスターする必要はありません。

以上がCSS を使用してコンテナを水平方向と垂直方向の中央に配置する 7 つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。