7 façons de centrer les conteneurs horizontalement et verticalement avec CSS

Cet article présente principalement en détail les 7 façons d'utiliser CSS pour centrer le conteneur horizontalement et verticalement. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Ce type de mise en page CSS est généralement utilisé là-bas. Il y en a beaucoup, et c'est aussi une question qui revient souvent dans les interviews. Vous en trouverez beaucoup après une recherche en ligne, mais je souhaite quand même les résumer moi-même.
Il existe de nombreuses méthodes de ce genre. Cet article n'en résume que quelques-unes pour approfondir l'impression.
Les rendus sont tous comme ça :

Méthode 1 : position plus marge

Code XML/HTMLCopier le contenu dans le presse-papier

1. <p classe ="envelopper">

2. <p class="centre">p>

3. p>

Code CSSCopier le contenu dans le presse-papiers

1. / **css**/ .wrap { largeur : 200px hauteur : 200px arrière-plan : jaune; position: relative

2. } .wrap .centre; { largeur : 100px ; hauteur : 100px arrière-plan : vert ; 🎜>marge : auto ; position : absolue ; >droite : 0 ; haut : 0 ; basbas : 0 🎜>Compatibilité : pris en charge par tous les principaux navigateurs, non pris en charge par IE6Méthode 2 :

   diaplay:table-cell

Copier le contenu dans le presse-papiers

<

p

1. class="wrap"

>

2. <p classe= "centre"

>

3. p> p >

4. >

   Code CSSCopier le contenu dans le presse-papiers

5. /*/
.wrap{ largeur

 :
200px

hauteur : 200px ; arrière-plan :

jaune
 ;
1. affichage

    : tableau-cellule ;  : milieu ; alignement du texte : centre ;

2. } .centre{ affichage : en ligne-bloc alignement vertical : milieu ; largeur : 100px hauteur : 100px ; : vert;

}
La raison de display:table-cell est qu'IE67 n'est pas compatible

4. Méthode 3 :
position plus transformation

Code XML/HTML

Copier le contenu dans le presse-papier


1. <

   p
2. class

   ="wrap"> <

   p
3. classe

   ="centre"> >p> >p>

4. Code CSSCopier le contenu dans le presse-papiers

5. /* css */

   .wrap {

   position
 :
relative

 ;
arrière-plan

 :

jaune ; ; hauteur : 200px

;} .
centre
1. {

   position : absolue arrière-plan : vert; haut:50%; gauche:50%; -webkit-transform:translate(-50%,-50%); (-50%,-50%); largeur : 100px hauteur : 100px 🎜> Compatibilité : IE9 et versions antérieures ne prennent pas en charge la transformation, mais la version mobile fonctionne mieux. Méthode 4 : flex;align-items: center;justify-content: centerCode XML/HTMLCopier le contenu dans le presse-papiers

<

p

classe="wrap">




 <p

classe
=
1. "centre"

   >

2. p

   > p> Copier le contenu dans le presse-papiers

3. 1. /* css */ .wrap { fond : jaune largeur : 200px; hauteur : 200px; affichage : flex ; aligner les éléments : centre ; -contenu : centre ; vert : 100px

      ;

   2. } Version mobile préférée Méthode 5 : dis

   play :flex;margin:auto
   XML/HTML Code

   Copier le contenu dans le presse-papiers

   
   

   <

   p classe=

   "wrap"
   1. >

   2. <

      p classe="centre">< ;/p

   3. > ;

       p> 

   Code CSS

   4. Copier le contenu dans le presse-papiers/* css */

      .wrap {
   fond
    :

   jaune
   

   largeur

    : 200px; hauteur :

   200px
   ;
   1. affichage

       : largeur : 100px; hauteur : 100px; marge : auto }

   2. La méthode privilégiée pour les terminaux mobiles Six : Position pure Code XML/HTMLCopier le contenu dans le presse-papiers

   4. <

   p

   classe

   =

   "wrap">

   
   

   <

   p classe=

   "centre"
   1. >
      p
   2. >

      p>

   3. Code CSSCopier le contenu dans presse-papier

      1. /* css */ .wrap { fond : jaune; largeur : 200px ; hauteur : 200px ; position : relative ;   

      2. } /**Méthode 1**/ .centre { fond : vert ; position : absolue ; largeur : 100px ; hauteur : 100px ; gauche : 50px ; haut : 50px ;    

      3.      

      4. } /**Méthode 2**/ .centre { fond : vert ; position : absolue ; largeur : 100px ; hauteur : 100px ; gauche : 50 % ; haut : 50 % ; marge-gauche:-50px; marge supérieure:-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;

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

      
      

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

      1.   

      2. <p classe="table">  

      3.     <p class="tableCell">  

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

      5. p>  

      6.   
         Code CSS
      7. 复制内容到剪贴板

      
      /* css*/

       .table { 

      hauteur : 200px;/*高度值不能少*/

       
      largeur
      1.  : 

         200px;/*宽度值不能少*/ affichage : tableau ; position : relative ; flotteur :gauche ; fond : jaune ;   

      2. } .tableCell { affichage : table-cell alignement vertical : milieu; 🎜>alignement du texte : centre; :

         10px

      3. *haut : 50% ; 🎜>gauche :

         } .
      contenu
      4. { 🎜>:

         relatif 🎜>gauche : -50% ;

         fond
      :
      5. vert

         🎜>

      Résumons temporairement les sept méthodes ci-dessus. . En fait, tant que vous êtes habitué à un ou deux d’entre eux, cela suffira.

      6. Résumé

      S'il s'agit d'un terminal mobile, alors il est plus pratique d'utiliser la méthode 4 et la méthode 5. Il prend également en charge la largeur et la hauteur non fixes, rapides, précises et impitoyables
      7. , c'est-à-dire use flex; align-items: center; >

         Code XML/HTMLCopier le contenu dans le presse-papiers

      9. <p classe="wrap"

      >
      11.  

          <

      p

      classe

      =

      "centre">

      p

      
      >

      p

      >

      1. Copier le contenu dans le presse-papiers

      2. /* css */ .wrap { arrière-plan : jaune ; largeur : 200px ; hauteur

          :
      200px
      3.  ; éléments :

         centre ; justifier-contenu : centre } .centre { arrière-plan : vert

          ;
      largeur
      4.  :

         100px ; ; }

      ou display:flex;margin:auto;
      

      Code XML/HTML

      Copier le contenu dans le presse-papiers

      1. <p classe="envelopper"> ="centre"

         >
      2. < /

         p>

    p > 🎜>

Code CSSCopier le contenu dans le presse-papiers

1. /* css */ .wrap { arrière-plan : jaune ; largeur : 200px hauteur : 200px affichage  : flex ;

2. }.

   centre { > : 100px hauteur : 100px; marge: auto S'il s'agit d'un PC, la compatibilité doit être prise en compte. La sixième méthode est bonne, c'est-à-dire la position pure.

3. Code XML/HTML

Copier le contenu dans le presse-papiers




<p

classe
=
1. "envelopper"

   >

2. ="centre">< /p> 

3. p > 🎜>Code CSSCopier le contenu dans le presse-papiers

4. /* css */ .wrap { fond : jaune

largeur
5.  :

   200px;

   ;
hauteur
 :

200px
;

position

 : relative >centre { arrière-plan

 :
vert
1. ;

   position : absolu largeur : 100px  ; >100px ; gauche : 50px ; haut : 50px; 

2. } /**Méthode 1**/.centre { fond : vert; position : absolue ; largeur : 100px; gauche : 50 % ; haut : 50 % marge-gauche : - 50px ; marge-haut; :-

   50px
; 🎜>

3. Si la hauteur de l'élément central côté PC n'est pas fixée, utilisez simplement la méthode sept et le code ne sera pas copié.
4. Si nous voulons vraiment résumer, il devrait y avoir plus de dix ou vingt types d'éléments CSS verticaux. Cependant, il n’est pas nécessaire de tous les maîtriser, à condition d’avoir une compréhension générale et qu’il n’y ait pas d’effets secondaires lors de leur utilisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!