検索

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

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

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

この記事では主に 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 コード


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

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

    3. クラス
=

"テーブル"

>





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

    class
=

"wrap"

>



p

クラス="センター">

  1. p>

  2. p> ;

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

    :
    4. 2 00px
  4. ;

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

    -
    5. content
  5. } .

    center

    ;
    6. 緑色
; :

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の新機能の詳細な分析

関連記事

続きを見る