Explication détaillée des avantages et des inconvénients de plusieurs techniques d'implémentation de styles centrés en CSS

Marges négatives

C'est peut-être la méthode d'utilisation la plus populaire en ce moment. Si la taille de l'élément block est connue, vous pouvez centrer le bloc de contenu dans le conteneur de la manière suivante :

Prenez un nombre négatif pour la marge extérieure, et la taille est largeur/hauteur (y compris le remplissage lorsque box-sizing : la bordure-box n'est pas utilisée, ), plus haut : 50 % ; A savoir :

.is-Negative {  
        width: 300px;  
        height: 200px;  
        padding: 20px;  
        position: absolute;  
        top: 50%; left: 50%;  
        margin-left: -170px; /* (width + padding)/2 */  
        margin-top: -120px; /* (height + padding)/2 */  
}

Les tests montrent que c'est la seule méthode qui fonctionne également bien sur IE6-IE7.

Avantages :

1. Bonnes fonctionnalités multi-navigateurs, compatible avec IE6-IE7.

2. La quantité de code est faible.

Inconvénients :

1. Il ne peut pas être adaptatif. Les paramètres de taille en pourcentage et de propriété min/max ne sont pas pris en charge.

2. Le contenu peut déborder du conteneur.

3. La taille de la marge est liée au remplissage et à la définition de la taille de la boîte : border-box. Le calcul doit être basé sur différentes situations.

Transformations

Il s'agit de la méthode la plus simple, qui peut obtenir le même effet de centrage absolu, et prend également en charge l'utilisation d'une hauteur variable de joint. La définition du bloc de contenu transform : translate(-50%,-50%) doit être préfixée par le fabricant du navigateur, et

top : 50%; left : 50%;

Type de code :

.is-Transformed {   
  width: 50%;  
  margin: auto;  
  position: absolute;  
  top: 50%; left: 50%;  
  -webkit-transform: translate(-50%,-50%);  
      -ms-transform: translate(-50%,-50%);  
          transform: translate(-50%,-50%);  
}

Avantages :

1. Hauteur du contenu variable

2 Moins de code

Inconvénients :

1. ne prend pas en charge

2. Les attributs doivent écrire le préfixe du fabricant du navigateur

3. Cela peut interférer avec d'autres effets de transformation

4. rendu des limites d'éléments flous

Pour en savoir plus sur l'implémentation et le centrage de la transformation, vous pouvez vous référer à l'article CSS-Tricks "Centering PercentageWidth/Height Elements"

Table-Cell

En général, c'est probablement le meilleur moyen d'obtenir le centrage, car la hauteur du bloc de contenu changera avec la hauteur du contenu réel et la compatibilité du navigateur est également bonne. Le plus gros inconvénient est qu’il nécessite beaucoup de balisage supplémentaire, nécessitant trois couches d’éléments pour centrer l’élément le plus interne.

HTML :

<div class="Center-Container is-Table">  
  <div class="Table-Cell">  
    <div class="Center-Block">  
    <!-- CONTENT -->  
    </div>  
  </div>  
</div>

CSS :

.Center-Container.is-Table { display: table; }  
.is-Table .Table-Cell {  
  display: table-cell;  
  vertical-align: middle;  
}  
.is-Table .Center-Block {  
  width: 50%;  
  margin: 0 auto;  
}

Avantages :

1. Très variable

2. développera l'élément parent.

3. Bonne compatibilité entre navigateurs.

Inconvénients :

Nécessite des balises HTML supplémentaires

12. Inline-Block

est un moyen très populaire de réaliser le centrage. L'idée de base est d'utiliser display: inline-block, vertical-align: middle et un pseudo élément pour placer le bloc de contenu au centre du conteneur.

Si la largeur du bloc de contenu est supérieure à la largeur du conteneur, par exemple, si un texte long est placé, la largeur du bloc de contenu ne peut pas dépasser 100 % du conteneur moins 0,25em, sinon le pseudo élément : after sera utilisé pour bloquer le bloc de contenu. Pour presser vers le haut du conteneur, en utilisant :before le bloc de contenu sera décalé vers le bas de 100 %.

Si votre bloc de contenu doit occuper autant d'espace horizontal que possible, vous pouvez utiliser max-width : 99% (pour les conteneurs plus grands) ou max-width : calc(100% -0.25em) (dépend sur les navigateurs pris en charge et la largeur du conteneur).

HTML :

<div class="Center-Container is-Inline">  
  <div class="Center-Block">  
    <!-- CONTENT -->  
  </div>  
</div>

CSS :

.Center-Container.is-Inline {   
  text-align: center;  
  overflow: auto;  
}  
  
.Center-Container.is-Inline:after,  
.is-Inline .Center-Block {  
  display: inline-block;  
  vertical-align: middle;  
}  
  
.Center-Container.is-Inline:after {  
  content: '';  
  height: 100%;  
  margin-left: -0.25em; /* To offset spacing. May vary by font */  
}  
  
.is-Inline .Center-Block {  
  max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */  
  /* max-width: calc(100% - 0.25em) /* Only for IE9+ */   
}

Les avantages et les inconvénients de cette méthode sont similaires à la méthode Table-Cell. Au début, j'ai ignoré cette méthode. . Abandonné car il s'agit bien d'une méthode de hack. Cependant, il s’agit d’une utilisation très populaire et bien prise en charge par les navigateurs.

Avantages :

1. Hauteur variable

2. Le débordement de contenu agrandira l'élément parent.

3. Prend en charge plusieurs navigateurs et convient également à IE7.

Inconvénients :

1. Nécessite un conteneur

2. Le centrage horizontal repose sur la marge gauche : -0,25em ; tailles.

3. La largeur du bloc de contenu ne peut pas dépasser 100 % du conteneur - 0,25em.

Flexbox

C'est la future tendance de la mise en page CSS. Flexbox est un nouvel attribut de CSS3, conçu à l'origine pour résoudre des problèmes de mise en page courants tels que le centrage vertical. N'oubliez pas que Flexbox ne sert pas seulement au centrage, il peut également être utilisé pour diviser des colonnes ou résoudre des problèmes de mise en page fous.

Avantages :

1. La largeur et la hauteur du bloc de contenu sont arbitraires et il déborde gracieusement.

2. Peut être utilisé dans des techniques de mise en page plus complexes et avancées.

Inconvénients :

1. IE8/IE9 ne le prend pas en charge.

2. Body nécessite des conteneurs et des styles CSS spécifiques.

3. Le code qui s'exécute sur les navigateurs modernes nécessite le préfixe du fournisseur du navigateur.

4. Il peut y avoir des problèmes de performances.

Suggestions :

Chaque technologie a ses avantages et ses inconvénients. La technologie que vous choisissez dépend des navigateurs pris en charge et de votre codage. Utilisez le tableau comparatif ci-dessus pour vous aider à prendre une décision.

Comme alternative simple, la technique du Centrage Absolu fonctionne bien. Là où vous utilisiez autrefois les marges négatives, vous pouvez désormais utiliser le centrage absolu à la place. Vous n'avez plus à vous soucier des calculs de marge fastidieux et des balisages supplémentaires, et vous pouvez également redimensionner et centrer les blocs de contenu.

Si votre site nécessite un contenu à hauteur variable, vous pouvez essayer deux méthodes : Table-Cell et Inline-Block. Si vous êtes sur le point de vous épuiser, essayez Flexbox et découvrez les avantages de cette technologie de mise en page avancée.

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!