7 Möglichkeiten, Container mit CSS horizontal und vertikal zu zentrieren

In diesem Artikel werden hauptsächlich die 7 Möglichkeiten zur horizontalen und vertikalen Zentrierung des Containers vorgestellt. Interessierte Freunde können sich auf diese Art von CSS-Layout beziehen Davon gibt es ziemlich viele, und es ist auch eine Frage, die oft in Interviews auftaucht. Sie werden viele davon finden, wenn Sie online suchen, aber ich möchte sie trotzdem selbst zusammenfassen.

Methoden dieser Art gibt es viele. Dieser Artikel fasst nur einige davon zusammen, um den Eindruck zu vertiefen.

Die Darstellungen sehen alle so aus:

Methode 1:

Position plus Rand

XML/HTML-Code

Inhalt in die Zwischenablage kopieren

1. <

   p Klasse ="wrap">

2. <

   p class="center">p>

3. p>

CSS-Code

Inhalt in die Zwischenablage kopieren

1. / **CSS**/

   .wrap { width: 200px; height: 200px; background : gelb; Position: } .wrap .

   Mitte
{
2. Breite

   : 100px; Höhe: 100px; Hintergrund; 🎜>Rand: Auto; Absolut; Rechtsrechts: 0; oben: 0; untenunten: 0; 🎜>Kompatibilität: unterstützt von alle gängigen Browser, aber nicht unterstützt von IE6Methode 2: diaplay:table-cell

3. XML/HTML-Code

Inhalt in die Zwischenablage kopieren

<

p class=

"wrap"

1. >

2. <

   p class= "center">

   p
3. >

   p> >

CSS-Code

4. Inhalt in die Zwischenablage kopieren/*/

   .wrap{
width
5. :

   200px

   ;
height:

200px
;

Hintergrund

: Anzeige: Tabellenzelle; align

:
middle
1. ;

   text-align: center;

2. } .center{ display: inline-block; vertikal-align: Mitte; Breite: Höhe: 100px; : grün; }

3. Der Grund für display:table-cell ist, dass IE67 nicht kompatibel ist

4. Methode 3:

   Position plus Transformation

XML/HTML-Code Inhalt in die Zwischenablage kopieren




1. <

   p

   class
=
2. "wrap"

   > <p

   Klasse
=
3. "center"

   > p> >p>

4. CSS-CodeInhalt in die Zwischenablage kopieren

5. /* css */
.wrap {
Position

:
relativ

;

Hintergrund: gelb; Breite

:
200px
1. ;

   Höhe: 200px;} .Mitte { Position: absolut; Hintergrund : grün; oben:50%; links:50%; -webkit-transform:translate(-50%,-50%); (-50%,-50%); Breite: 100px; Höhe: 100px; Kompatibilität: IE9 und niedriger unterstützen Transform nicht, aber die mobile Version bietet eine bessere Leistung. Methode 4: flex;align-items: center;justify-content: centerXML/HTML-Code

Inhalt in die Zwischenablage kopieren

<p class

=

"wrap"


>

 

<
1. p

   class=

   "center"
2. >

   p> p>

3. Inhalt in die Zwischenablage kopieren

   1. /* css */ .wrap { Hintergrund: Gelb; Breite: 200px; height; display: center; -Inhalt: Mitte; Breite: 100px;

      Höhe
   :
   2. 100px

      ; } Mobile Version bevorzugt

      Methode 5:
   dis

   3. play :flex;margin:auto

   XML/HTML Code

   Inhalt in die Zwischenablage kopieren

   
   

   <p

   class
   =
   1. "wrap"

      >

   2. <p class="center">

      < ;/
   3. p

      > ; p> 

   4. CSS-CodeInhalt in die Zwischenablage kopieren

   /* css */ .wrap {

   Hintergrund
   :

   Gelb

   ; Breite: 200px;

   Höhe
   :
   1. Anzeige

      : Breite; Höhe: 100px; Rand: auto; }

   2. Die bevorzugte Methode für mobile Endgeräte Sechs: Reine Position XML/HTML-CodeInhalt in die Zwischenablage kopieren

   <

   4. p

   class
   =

   "wrap"

   > 🎜>p

   
   class

   =

   "center">

   p

   1. >

   2. p>

   3. CSS-CodeInhalt in die Zwischenablage kopieren

      1. /* css */ .wrap { Hintergrund: Gelb; Breite: 200px; Höhe: 200px; Position: relativ;   

      2. } /**Methode 1**/ .Mitte { Hintergrund: grün; Position: absolut; Breite: 100px; Höhe: 100px; links: 50px; oben: 50px;    

      3.      

      4. } /**Methode 2**/ .Mitte { Hintergrund: grün; Position: absolut; Breite: 100px; Höhe: 100px; links: 50 %; oben: 50 %; Rand links:-50px; margin-top:-50px;   

      5. }   

      6.   

      兼容性：适用于所有浏览器

      方法六中的方法一计算公式如下:
      子元素（conter）的left值计算公式：left=(父元素的宽 - 子元素的宽) / 2=(200-100) / 2=50px ;
      子元素（conter）的top值计算公式：top=(父元素的高 - 子元素的高 ) / 2=(200-100) / 2=50px;
      方法二计算公式:
      left值固定为50%;
      子元素的margin-left= -（子元素的宽/2）=-100/2= -50px;
      top值也一样，固定为50%
      子元素的margin-top= -（子元素的高/2）=-100/2= -50px;

      方法七:兼容低版本浏览器，不固定宽高

      
      

      XML/HTML-Code复制内容到剪贴板

      1.   

      2. <p Klasse="Tabelle">  

      3.     <p Klasse="tableCell">  

      4.         <S  class="content">不固定宽高,自适应p>  

      5.     p>  

      6. p>  

      7.   

      
      

      CSS-Code复制内容到剪贴板

      1. /* css*/ .table { height: 200px;/*高度值不能少*/ width:  200px;/*宽度值不能少*/ display: table; Position: relativ; schweben:links; Hintergrund: gelb;   

      2. } .tableCell { display: table-cell; vertikal-align: middle; 🎜>text-align: center; :

         10px
      ;

      3. *top: 50%; 🎜>links: 50%; 🎜>inhalt { 🎜>:relativ; 🎜>links

         : -50%;
      Hintergrund
      4. :

         grün; 🎜>

      5. Es gibt zu viele Methoden . Solange Sie an ein oder zwei davon gewöhnt sind, wird es ausreichen.

         Zusammenfassung

      6. Wenn es sich um ein mobiles Gerät handelt, ist es bequemer, Methode 4 und Methode 5 zu verwenden. Es unterstützt auch nicht feste Breite und Höhe, schnell, genau und rücksichtslos

         , das heißt, verwenden Sie align-items: center; >XML/HTML-Code

         Inhalt in die Zwischenablage kopieren

      8. <

         p
      9. class

         ="wrap">

       
      10. <
          p
      11. Klasse

          =

          "center"
      >
      p
      >

      p
      

      >

      
      

      Inhalt in die Zwischenablage kopieren

      1. /* css */ .wrap {

         Hintergrund
      :
      2. gelb

         ; Breite: Höhe: 200px: flex; Elemente: Mitte; Rechtfertigung-

         Inhalt
      :
      3. Mitte

         } .Mitte { Hintergrund: grün; Breite: 100px; Höhe: 100px ;

      }

      4. oder display:flex;margin:auto;

      XML/HTML-Code

      Inhalt in die Zwischenablage kopieren
      

      1. <p class="wrap"> ="center">< /p> 

      2. p > 🎜>

         CSS-CodeInhalt in die Zwischenablage kopieren

         1. /* css */ .wrap { Hintergrund: Gelb; Breite: Höhe: 200px; Anzeige : flex;

         }.
         2. Mitte

            { >: 100px; Höhe: 100px; Marge: automatisch; }

         3. Wenn es sich um einen PC handelt, muss die Kompatibilität berücksichtigt werden. Methode sechs ist gut, das heißt reine Position.

         XML/HTML-Code

         Inhalt in die Zwischenablage kopieren

         
         

         1. <

            p

            class
         =
         2. "wrap"

            > ="center">< /

         3. p

            > p > 🎜>CSS-Code

         Inhalt in die Zwischenablage kopieren

         4. / * css */ .wrap { Hintergrund

            :
         Gelb
         5. ;

            Breite

            :
         200px
         ;

         200px
         ;

         Position

         : relativ; Hintergrund:

         grün
         ;
         1. Position

            : absolut; Breite: 100px ; Höhe; links: 50px; oben: 50px; 

          

         2. } /**Methode 1**/.Mitte { Hintergrund: grün; Position: absolut; Breite: Höhe: 100px: 50 %; 🎜>oben: 50 %; Rand links:- 50px; Rand-oben:-50px

            ;

         3. Wenn die Höhe des mittleren Elements auf der PC-Seite nicht festgelegt ist, verwenden Sie einfach Methode sieben, und der Code wird nicht kopiert.

         Wenn wir die vertikalen CSS-Elemente wirklich zusammenfassen wollen, sollten es mehr als zehn oder zwanzig Typen sein. Es ist jedoch nicht notwendig, sie alle zu beherrschen, solange Sie über ein allgemeines Verständnis verfügen und bei der Anwendung keine Nebenwirkungen auftreten.

   Das obige ist der detaillierte Inhalt von7 Möglichkeiten, Container mit CSS horizontal und vertikal zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!