Maison >interface Web >tutoriel CSS >Comment définir le centrage vertical en CSS
Comment définir le centrage vertical en CSS
- 青灯夜游original
- 2021-04-21 17:08:2158471parcourir
Comment définir le centrage vertical en CSS : 1. Utilisez l'attribut line-height pour centrer verticalement le texte ; 2. Utilisez la disposition flexible CSS3 pour centrer verticalement le texte 3. Utilisez le positionnement absolu et la transformation pour centrer verticalement les éléments de bloc ; ; 4. Utilisez la disposition flexible pour centrer verticalement les éléments de bloc.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
css définit le texte pour qu'il soit centré verticalement
1. >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 200px;
background: paleturquoise;
/*设置为伸缩容器*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/*垂直居中*/
-webkit-box-align: center;/*旧版本*/
-moz-box-align: center;/*旧版本*/
-ms-flex-align: center;/*混合版本*/
-webkit-align-items: center;/*新版本*/
align-items: center;/*新版本*/
}
</style>
</head>
<body>
<div class="box">css 垂直居中--文本文字（弹性布局）</div>
</body>
</html>Rendu :
css définit les éléments de bloc pour qu'ils soient verticalement centré
1. Utiliser le positionnement absolu et la transformation (hauteur de l'élément inconnue)Si nous ne connaissons pas la hauteur de l'élément, alors nous devons d'abord positionner l'élément La position centrale du conteneur, puis utiliser l'attribut translation de transform pour faire coïncider le centre de l'élément avec le centre du conteneur parent pour obtenir un centrage vertical :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
background: #93BC49;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中,css 垂直居中</div>
</div>
</body>
</html>Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
display: flex;
flex-direction: column;
justify-content: center;
}
.child{
width: 300px;
height: 100px;
background: #08BC67;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了--弹性布局</div>
</div>
</body>
</html>Rendu :
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!