検索

ホームページ  >  記事  >  ウェブフロントエンド  >  CSS を使用してコンテナを水平方向と垂直方向の中央に配置する 7 つの方法

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

巴扎黑
巴扎黑オリジナル
2017-05-21 10:31:152529ブラウズ

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

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

方法 1: 位置とマージン


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

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

    2. >

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

    :
    3. 黄色
  3. ;

    位置: } .wrap .center

    {
    4. 幅
  4. ;

    高さ

    :
    5. 100ピクセル

; :

緑
;

位置

: 左: 0; 上: 0;下

    下
  1. : 0 ;

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

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

    < p class= "wrap"> > ; p

    3. >

CSS コード


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

/ *&#&/

.wrap{
    幅
  1. :

    200px; 背景

    :
    2. 黄色
  2. :

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

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

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

    6. 方法 3:
位置と変換

XML/HTML コード


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

  1. <

    2. p

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

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

    ;
    4. :
  4. 200px

    ;} .center { position: absoluteback;

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

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

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

    XML/HTML コード

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

    3. 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

  2. > p>

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

    黄色
    4. ;
  4. 幅

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

    } .
    5. 背景
:

緑
;

幅

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

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

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

    <p class="wrap"

    >

    4. p

  4. クラス

    =
    5. 「センター」

>

p>


p>

  2. CSS コード

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

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

      {
      2. 背景
    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. <

    6. p

      7. クラス
    =

    "テーブル"

    >





    <

    p

    クラス= 「コンテンツ」

    >

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

    p>

  1. p

    2. >

  2. p>

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

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

    position
    5. :
  5. float

    :left; 黄色;

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

    :
    7. 絶対
  7. ;

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

    *
    8. 位置
  8. :

    相対; : -50%

  9. }

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

    まとめ

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

    13. XML/HTML コード

  13. クリップボード

    15. <

  15. p

    16. 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. 背景
      2. :

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

      3. XML/HTML コード

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


      < クラス

      =
        " Wrap"

      1. > gt;

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

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

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

        100px
        4. ;
      4. 左

        : 50px ; &*/

        .
        5. センター
      5. {

        背景

        :
        6. 緑
      ;

      位置
      :

      幅

      : 高さ: 左; : 50%

      マージン左
        :-
      1. 50px

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

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

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：CSS3の新機能の詳細な分析次の記事：CSS3の新機能の詳細な分析

    関連記事

    続きを見る