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;
}

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⃣️

.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!