Discussion sur le centrage horizontal et vertical des éléments dans HTML_HTML/Xhtml_Webpage Production

Lorsque nous concevons la page, nous devons souvent centrer le DIV et l'afficher horizontalement et verticalement par rapport à la fenêtre de la page, par exemple en centrant la fenêtre de connexion.

Jusqu'à présent, de nombreuses méthodes ont été explorées.

HTML :

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <corps>
2.  <div class="maxbox" >
3.  <div class="minbox align -center">div>
4.  div> 
5. corps>

Rendu (les méthodes suivantes ont les mêmes rendus) :

Le premier type : positionnement absolu CSS

Utilisez principalement le positionnement absolu, puis utilisez la marge pour ajuster à la position médiane.

Élément parent :

Code CSSCopier le contenu dans le presse-papiers

1. .maxbox{
2. position : relative;
3. largeur : 500px;
4. hauteur : 500px;
5. marge : 5px ;
box-shadow :
6. 1px 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
}

Éléments enfants :

Code CSS

Copier le contenu dans le presse-papiers

1. .minbox{
2. largeur : 200px;
3. hauteur : 200px; box-shadow :
1px
4. 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }

5. Alignement central horizontal et vertical :

   Code CSSCopier le contenu dans le presse-papiers

   1. .align-centre{
   2. position : absolue;
   3. gauche : 50%
   4. haut : 50%
    
   5. marge gauche : -100 px;  /*largeur/-2* /
    
   6. marge supérieure : -100px;  /*hauteur/-2* /
   }
   Deuxième type : positionnement absolu CSS Javascript/JQuery

   Utilisez principalement le positionnement absolu, puis utilisez Javascript/JQuery pour vous ajuster à la position médiane. Par rapport à la première méthode, cette méthode améliore la flexibilité de la classe.

   Élément parent :

   Code CSS

   Copier le contenu dans le presse-papiers

   1. .maxbox{
   2. position : relative;
   largeur
   3.  : 500px;
   hauteur
   4.  : 500px;
   marge
   5.  : 5px ; box-shadow :
   1px
   6. 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
   Éléments enfants :

   Code CSS

   Copier le contenu dans le presse-papiers

   .minbox{

   largeur
   2.  : 200px;
   hauteur
   3.  : 200px; box-shadow : 1px
   4. 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
   5. Alignement central horizontal et vertical :

   Code CSS

   Copier le contenu dans le presse-papiers

   1. .align-centre{
   2. position : absolue;
   3. gauche : 50%
   4. haut : 50%
   }

   JQuery :
   Code JavaScript

   Copier le contenu dans le presse-papiers

   1. $(fonction(){
   $(
   2. ".align-center").css(
                                               
   3.  
   "marge-gauche"
   4.  : ($().align-center").width() /-2),  
   "marge-haut"
   5.  : ($().align-center").height() /-2)                                                               
   );
   });
   9. Le troisième type : déplacement de positionnement absolu CSS3

   En utilisant le positionnement absolu et la transformation CSS3 : traduire peut également obtenir le même effet.

   Élément parent :

   Code CSS

   Copier le contenu dans le presse-papiers

   .maxbox{

   1. position
   :
   2. relative; largeur :
   500px
   3. ; hauteur :
   500px
   4. ; marge :
   5px
   5. ; box-shadow : 1px
   1px
   6. 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8); }
   Éléments enfants :
   Code CSS

   Copier le contenu dans le presse-papiers
   1. .minbox{
   2. largeur : 200px;
   3. hauteur : 200px;
   box-shadow :
   4. 1px 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
   }
   Alignement central horizontal et vertical :

Code CSS

Copier le contenu dans le presse-papiers

1. .align-centre{
2. position : absolue;
haut
3.  : 50%
gauche
4.  : 50% -webkit-transform : traduire(-50%, -50%);
5. -moz-transform : traduire (-50%, -50%);
6. transformer : traduire(-50%, -50%);
/*Maj vers la gauche et vers le haut*/
7. }

Quatrième type : Flexbox : [Modèle de boîte d'aménagement télescopique]

Rendre des éléments horizontaux et verticaux est trop simple avec le modèle Flexbox. Vous devez modifier le code HTML ici :

Code XML/HTML

Copier le contenu dans le presse-papiers

<

1. div class="maxbox align-center" >  <
2. div class="minbox" >div> div>
Élément parent :

Code CSS

Copier le contenu dans le presse-papiers

1. .maxbox{
2. position : relative;
3. largeur : 500px;
4. hauteur : 500px;
5. marge : 5px ;
box-shadow :
6. 1px 1px 1px rgba (0, 0, 0, 0,8), -1px -1px 1px rgba(0, 0, 0, 0,8);
}

Éléments enfants :

Code C#

Copier le contenu dans le presse-papiers

1. .minbox{
largeur : 200px
hauteur : 200px
box-shadow : 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8
4. );
}

Alignement central horizontal et vertical :

Code CSS

Copier le contenu dans le presse-papiers

1. .align-centre{
2. affichage : flexion
3. affichage : -webkit-flex;  justifier-
contenu
4.  : centre ; > aligner les éléments : centre; }
5. Comparaison de plusieurs méthodes : Le premier ajustement de la marge de positionnement absolu CSS a une bonne compatibilité mais manque de flexibilité. Si de nombreuses cases doivent être centrées horizontalement et verticalement, des .align-center différents doivent être écrits en raison de leur largeur et de leur hauteur différentes.
Le second utilise un langage de script, qui présente une bonne compatibilité et compense les défauts du premier. L'effet du centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
6. Le troisième type utilise de nouvelles propriétés de CSS3 et est compatible avec IE10, Chrome, Firefox et Opera. La compatibilité n'est pas très bonne et l'effet de centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur. Grâce au modèle Flexbox, compatible avec Firefox, Opera et Chrome, IE est complètement anéanti. Cela n'affecte pas non plus l'effet de centrage horizontal et vertical en raison des changements de largeur et de hauteur.
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.