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

巴扎黑
リリース: 2017-05-21 10:31:15
オリジナル
2533 人が閲覧しました

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

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

方法 1: 位置とマージン


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

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

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

    :
  4. 黄色
  5. ;

    位置: } .wrap .center

    {
  6. ;

    高さ

    :
  7. 100ピクセル

; :


;

位置

: : 0; : 0;下

  1. : 0 ;

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

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

    < p class= "wrap"> > ; p

  3. >

CSS コード


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

/ *&#&/

.wrap{
  1. :

    200px; 背景

    :
  2. 黄色
  3. :

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

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

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

  6. 方法 3:
位置と変換

XML/HTML コード


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

  1. <

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

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

    ;
  5. :
  6. 200px

    ;} .center { position: absoluteback;

    green
  7. :50%; -webkit-transform:翻訳( -50%,-50%); 変換:translate(-50%,-50%);
  8. 互換性: IE9 以下では変換がサポートされていないため、モバイル版のパフォーマンスが向上します。

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

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

  2. p
  3. >

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

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

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

<

p

class=「ラップ」>


<p class

=
    「センター」
  1. >

  2. p
  3. > p>

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

    黄色
  5. ;
  6. : 200ピクセル; ディスプレイ:

    } .
  7. 背景
:


;

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

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

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

    <p class="wrap"

    >
  3. p
  4. クラス

    =
  5. 「センター」

>

p>


p>

  1. CSS コード

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

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

      {
    2. 背景
    3. :

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

      ;
    4. }

    5. 互換性: すべてのブラウザに適用可能メソッド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. <
    7. p

    8. クラス
    =

    "テーブル"

    >





    <

    p

    クラス= 「コンテンツ」

    >

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

    p>

  1. p

  2. >

  3. p>

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

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

    position
  6. :
  7. float

    :left; 黄色;

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

    :
  9. 絶対
  10. ;

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

    *
  11. 位置
  12. :

    相対; : -50%

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

    まとめ

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

  18. <
  19. p

  20. 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. 背景
      3. :

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

      4. XML/HTML コード

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


      < クラス

      =
        " Wrap"
      1. > gt;

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

        高さ
      3. :
      4. 200ピクセル

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

        100px
      5. ;
      6. : 50px ; &*/

        .
      7. センター
      8. {

        背景

        :
      ;

      位置
      :

      : 高さ: ; : 50%

      マージン左
        :-
      1. 50px

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

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

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート