Maison > Article > interface Web > Quelques méthodes pour réaliser un centrage horizontal/centrage vertical en CSS
Cet article résume quelques méthodes d'utilisation de CSS pour réaliser un centrage horizontal/centrage vertical. Les tutoriels sont très basiques. J'espère qu'il sera utile à tout le monde !
1. Centrage horizontal
1. (Élément en ligne)
Définissez l'attribut text-align:center;
2 marge : 0 auto(élément de niveau bloc)
Définir la marge sur l'élément lui-même : 0 auto ;
3. La largeur de l'élément est fixe
1⃣️ position+margin-left
.ele{ position:absolute; width:固定; left:50%; margin-left:-0.5宽度; }
2⃣️ position+gauche:0;droite:0;marge:0 auto
.ele{ position:absolute; width:固定; left:0; right:0; margin:0 auto; }
4. La largeur de l'élément n'est pas fixe
1⃣️css3-transform
.ele{ position:absolute; left:50%; transform:translate(-50%,0); }
2⃣️css3-width:fit-content (lorsque le l'élément qui doit être centré est défini Lorsque float:left, vous pouvez définir les attributs suivants pour l'élément parent de l'élément) 🎜>3⃣️flex
<span style="color: #000000">.ele-parent{ width: -moz-fit-content; width: -webkit-fit-content; width:fit-content; margin:0 auto; }<br>该属性目前只支持Chrome 和 Firefox浏览器.</span>
2. Centrage vertical
.ele-parent{ display: flex; justify-content: center; }1. hauteur de ligne : eleparent-height
Vous pouvez définir l'attribut de centrage vertical d'une seule ligne de texte line-height : hauteur de l'élément parent
2. La hauteur de l'élément est fixe
1⃣️position+marge-haut
2⃣️
position+haut:0;bas:0;marge:auto 0
.ele-parent{ position:relative; } .ele{ position:absolute; top:50%; height:固定; margin-top:-0.5高度; }
3. La hauteur de l'élément n'est pas fixe
1⃣️vertical-align
.ele{ position:absolute; height:固定; top:0; bottom:0; margin:auto 0; }
2⃣️css3-transform
<span style="color: #000000">.ele-parent{ display:table; } .ele{ display:table-cell;<br> vertical-align:middle; }</span><strong><span style="font-size: 16px"> </span></strong>
3⃣️
flex
.ele{ position:absolute; top:50%; transform: translate(0,-50%); }
C'est tout pour l'instant, merci de critiquer et de corriger les éventuelles lacunes ! ! !
.ele-parent{ display: flex; align-items:center; }
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!