Maison >interface Web >tutoriel CSS >Partagez 7 façons d'obtenir un centrage vertical à l'aide de CSS
Partagez 7 façons d'obtenir un centrage vertical à l'aide de CSS
- 高洛峰original
- 2017-03-21 17:10:541571parcourir
Aujourd'hui, ma demande de blog a été approuvée. Je vais vous parler des différentes méthodes que j'ai vues pour réaliser un centrage vertical en utilisant du CSS pur. Pourquoi en faire le premier article ? Parce que c'est la connaissance la plus utile que j'ai acquise lorsque j'ai commencé à travailler avec le front-end, j'espère que tout le monde pourra en bénéficier également !
L'implémentation du centrage horizontal en CSS est très simple. Les éléments en ligne définissent le text-align:center de leurs éléments parents, et les éléments au niveau du bloc s'appliquent magrin:auto. Cependant, réaliser un centrage vertical est un peu fastidieux. Tout d’abord, c’est une exigence extrêmement courante, mais en pratique, elle est souvent difficile à réaliser, surtout lorsque la taille de conception n’est pas fixe. Voici quelques méthodes que j'ai trouvées :
Méthode 1 : Hauteur de lignehauteur de ligne
(1) Texte sur une seule ligne centré
Code HTML
<p class="box1"> <p class="box2">垂直居中</p> </p>
Code CSS
.box1{
height: 200px;
}
.box2{
line-height: 200px;
}
(2)ImageCentrée verticalement
Code HTML
<p class="box1"> <img src="images/bg-sun.png" alt=""> </p>
Code CSS
.box1{
line-height:200px;
}
.box1 img{
vertical-align: middle;
}
Méthode 2 : cellule-tableau
Code CSS
.box1{
display: table-cell;
vertical-align: middle;
text-align: center;
}
Méthode 3 : affichage:flex
(1) Code CSS
.box1{
display: flex;
}
.box2{
margin:auto;
}
(2) Code CSS
.box1{
display: flex;
justify-content:center;
align-items:center;
}
Méthode 4 : Positionnement absolu et marges négatives
(1) Code CSS
.box1{
position: relative;
}
.box2{
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;/*减去子元素高度一半*/
margin-left:-32px;/*减去子元素宽度一半*/
}
(2 ) Code CSS
.box2{
position: absolute;
top:calc(50% - 10px);/*减去子元素高度一半*/
left:calc(50% - 32px);/*减去子元素宽度一半*/
}
Méthode cinq : Positionnement absolu et 0
Code CSS
.box2{
width: 50%;
height: 50%;
background: #555;
overflow: auto;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
Méthode six : traduire
(1) Code CSS
.box2{
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
(2) Code HTML
<body> <p class="box1"> </p> </body>
Code CSS
.box1{
width: 200px;
height: 200px;
background: #666;
margin: 50vh auto 0;
transform: translateY(-50%);
}
Méthode 7 : display:-webkit-box
Code CSS
.box2{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
-webkit-box-orient: vertical;
text-align: center7 }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!