Explication détaillée de la méthode de centrage CSS

Le centrage CSS est un problème auquel les ingénieurs front-end sont souvent confrontés, et c'est aussi l'une des compétences de base. Aujourd'hui, l'éditeur a compilé et trié les solutions de centrage CSS. Actuellement, il existe 15 solutions dont le centrage horizontal, le centrage vertical et le centrage horizontal et vertical. S'il manque quelque chose, il sera ajouté l'un après l'autre. Cela peut être considéré comme un mémo.

1 Centrer horizontalement

1.1 Horizontal centrage des éléments en ligne

Utilisez text-align: center pour obtenir un centrage horizontal des éléments en ligne à l'intérieur des éléments au niveau du bloc. Cette méthode est efficace pour le centrage horizontal des éléments en ligne (inline), des blocs en ligne (inline-block), des tableaux en ligne (inline-table) et des éléments inline-flex.

Code de base :

.center-text {    text-align: center;
 }

1.2 Les éléments au niveau du bloc sont centrés horizontalement

En modifiant la marge gauche et la marge fixe width éléments au niveau du bloc Définir à droite pour centrer automatiquement les éléments au niveau du bloc horizontalement.

Code de base :

.center-block {  margin: 0 auto;
}

1.3 Les éléments à plusieurs niveaux de blocs sont centrés horizontalement

1.3.1 Utilisation du bloc en ligne

S'il y a deux éléments de niveau bloc ou plus dans une rangée, définissez le type d'affichage de l'élément de niveau bloc sur inline-block et l'attribut text-align du conteneur parent pour centrer horizontalement les multiples éléments de niveau bloc. .

Code de base :

.container {    text-align: center;
}.inline-block {    display: inline-block;
}

1.3.2 Utiliser l'affichage : flex

Utiliser une disposition élastique (flex) pour obtenir un centrage horizontal, où justifier-contenu est utilisé pour définir élasticité L'alignement de l'élément de boîte dans la direction de l'axe principal (axe horizontal). Dans cet exemple, les éléments enfants sont définis pour être affichés horizontalement et centrés.

Code de base :

.flex-center {    display: flex;    justify-content: center;
}

2 Centrage vertical

2.1 Ligne unique en ligne (en ligne-) Centrez l'élément verticalement

en définissant la hauteur (height) et la hauteur de ligne (line-height) de l'élément en ligne pour qu'elles soient égales, centrant ainsi l'élément verticalement.

Code de base :

#v-box {    height: 120px;    line-height: 120px;
}

2.2 Les éléments multilignes sont centrés verticalement

2.2.1 Utilisation de la disposition du tableau (tableau)

Utilisez vertical-align : milieu de la disposition du tableau pour obtenir un centrage vertical des éléments enfants.

Code de base :

.center-table {    display: table;
}.v-cell {    display: table-cell;    vertical-align: middle;
}

2.2.2 Utilisation de la disposition flex (flex)

Utilisation de la disposition flex pour obtenir un centrage vertical, où flex-direction: la colonne définit le principal direction de l’axe comme Portrait. La mise en page flexible étant définie en CSS3, il existe des problèmes de compatibilité dans les anciens navigateurs.

Code de base :

.center-flex {    display: flex;    flex-direction: column;    justify-content: center;
}

2.2.3 Utilisation de "l'élément fantôme"

Utilisation de la technologie "élément fantôme" (élément fantôme) pour obtenir un centrage vertical, c'est-à-dire dans le conteneur parent, placez un pseudo-élément avec une hauteur de 100 % à l'intérieur, de sorte que le texte et le pseudo-élément soient alignés verticalement pour obtenir un centrage vertical.

Code de base :

.ghost-center {    position: relative;
}.ghost-center::before {    content: " ";    display: inline-block;    height: 100%;    width: 1%;    vertical-align: middle;
}.ghost-center p {    display: inline-block;    vertical-align: middle;    width: 20rem;
}

2.3 Les éléments au niveau du bloc sont centrés verticalement

2.3.1 Éléments au niveau du bloc à hauteur fixe

Nous connaissons la hauteur et la largeur de l'élément centré, le problème du centrage vertical est donc simple. Le centrage vertical peut être obtenu en positionnant absolument l'élément à 50 % du haut et en définissant margin-top pour décaler la moitié de la hauteur de l'élément vers le haut.

Code de base :

.parent {  position: relative;
}.child {  position: absolute;  top: 50%;  height: 100px;  margin-top: -50px; 
}

2.3.2 Éléments au niveau du bloc de hauteur inconnue

Lorsque la hauteur et la largeur de l'élément centré verticalement sont inconnues, nous pouvons utiliser CSS3 L'attribut transform est décalé de 50 % dans la direction opposée à l'axe Y pour obtenir un centrage vertical. Cependant, certains navigateurs présentent des problèmes de compatibilité.

Code de base :

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);
}

3 Centrage horizontal et vertical

3.1 Éléments à largeur et hauteur fixes Centrage horizontal et vertical

traduit la moitié de la largeur totale de l'élément à travers la marge pour centrer l'élément horizontalement et verticalement.

Code principal :

.parent {    position: relative;
}.child {    width: 300px;    height: 100px;    padding: 20px;    position: absolute;    top: 50%;    left: 50%;    margin: -70px 0 0 -170px;
}

3.2 Les éléments de largeur et de hauteur inconnus sont centrés horizontalement et verticalement

Utiliser la transformation 2D, à la fois horizontalement et verticalement la moitié de la largeur et de la hauteur dans le sens opposé, en centrant l'élément horizontalement et verticalement.

Code principal :

.parent {    position: relative;
}.child {    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%, -50%);
}

3.3 Utilisation de la mise en page flexible

Utilisation de la mise en page flexible, où justifier le contenu est utilisé pour définir ou récupérer une boîte flexible elements L'alignement dans la direction de l'axe principal (axe horizontal) ; et la propriété align-items définit l'alignement des éléments flexibles dans la direction de l'axe latéral (axe vertical) de la ligne actuelle du conteneur flexible.

Code de base :

.parent {    display: flex;    justify-content: center;    align-items: center;
}

3.4 Utilisation de la disposition en grille

L'utilisation d'une grille pour obtenir un centrage horizontal et vertical a une mauvaise compatibilité et n'est pas recommandée.

Code principal :

.parent {  height: 140px;  display: grid;
}.child { 
  margin: auto;
}

Programme de démonstration :

Code de démonstration

3.5 Centrage horizontal et vertical sur l'écran

Le centrage horizontal et vertical sur l'écran est très couramment utilisé et est requis pour les pages de connexion et d'inscription classiques. Pour assurer une meilleure compatibilité, la disposition des tableaux doit également être utilisée.

Code de base :

.outer {    display: table;    position: absolute;    height: 100%;    width: 100%;
}.middle {    display: table-cell;    vertical-align: middle;
}.inner {    margin-left: auto;    margin-right: auto; 
    width: 400px;
}

Programme de démonstration :

Code de démonstration

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!