Résumé des problématiques liées au centrage horizontal et vertical de la production de pages html_HTML/Xhtml_Web

J'ai rencontré beaucoup de problèmes de centrage ces derniers temps, j'ai donc pris le temps de les résumer ici afin qu'on puisse les retrouver facilement à l'avenir

1. Texte centré

Copier le code

Code comme suit :

Je suis au milieu...

.. hauteur ligne-hauteur texte -center（ Ne peut centrer qu'une seule ligne)
.wrap{
width:px;
height:px;
border:px solid red; > line-height: px;
}

ps:text-align:center centre simplement les éléments en ligne sous l'élément
1.2display : table-cell (Plusieurs lignes à hauteur fixe centrées)

Copier le codeLe code est le suivant :

.wrap{

width:px;
height:px;
border:px solid red
text-align: center
display:table-; cell;
vertical- align: middle;
}


display:table-cell : Cela ne fonctionne pas dans ie67, il est préférable de l'utiliser avec display:table;

ie67 : (Il ne sera plus utilisé à l'avenir. , mais mettons-le ici)
Méthode 1 : (La hauteur de la balise em est égale à la hauteur de le parent, donc centrer span et em équivaut à centrer span sur le parent)

Copier le codeLe le code est le suivant :

Je suis au milieu... Je suis au milieu... Je suis au milieu... Je suis au milieu...

.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
}
.wrap span{
vertical-align : middle;
display:inline-block;
width:px;
}
.wrap em{
height:%;
vertical-align: middle
display: bloc en ligne;
}

Méthode 2 : (En ajoutant une balise parent positionnée de manière absolue à l'élément enfant, puis en faisant correspondre le positionnement relatif de l'élément enfant pour le centrer horizontalement et verticalement)

Copier le codeLe code est le suivant :

< ;span class="span"> ;
Je suis au milieu... Je suis au milieu... Je suis au milieu... Je suis au milieu...

.wrap{
width:px
height:px;
border : px rouge uni;
display:table;
position:relative;
overflow: caché;
}
.wrap .span{
display:table-cell
vertical; -align: middle;
text-align: center;
*position: absolue;
top:%;
left:%;
}
.wrap .span{
*position:relative;
haut:-%;
gauche:- %;
}

1.3rembourrage (rembourrage intérieur, il va sans dire)

Copier le codeLe code est la suivante :

.wrap{

width:px;
border:px solid red;
padding:px ;
}

2. Élément centré

Copier le code Le code est la suivante :

2.1position : marge négative absolue (la largeur et la hauteur doivent être disponibles pour calculer la marge)

Copier le codeLe code est le suivant :

.wrap{
width:px;
height:px;
position:absolute
top:%
left:%
margin-top; :-px;
margin-left:-px;
border:px solid red;
}
.wrap span{
width:px
height:px; > > background:red;
position: absolue;
top:%
left:%
margin-top:-px; }

ps : CSS implémente le centrage horizontal et le centrage vertical des DIV

Copier le code

code Comme suit :

>

main" >DIV est centré horizontalement et verticalement de haut en basDIVCSS5

< ;/html>




Introduction au principe du centrage horizontal et vertical

Positionnement absolu : absolu est utilisé ici. Utilisez gauche et haut pour définir la distance de l'objet vers le haut et la gauche à 50 %, mais si. il est réglé à 50%, la boîte est en fait L'effet de centrage n'est pas obtenu, donc margin-left:-200px;margin-top:-100px est défini. L'astuce ici est que la valeur de margin-left est la moitié de la valeur. width, et la valeur de margin-top est également la moitié de la hauteur de l'objet. En même temps, set est négatif, obtenant ainsi un centrage horizontal et vertical.