Comment définir le centrage vertical en CSS-tutoriel CSS-php.cn

Comment définir le centrage vertical en CSS

青灯夜游

Libérer： 2023-01-05 16:10:27

original

58483 Les gens l'ont consulté

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.

Comment définir le centrage vertical en CSS

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>

Copier après la connexion

Rendu :

Comment définir le centrage vertical en CSS Cela permettra au texte du div d'être centré horizontalement et verticalement

2. Disposition flexible CSS3 Centrez le texte verticalement

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

Copier après la connexion

Rendu :

Comment définir le centrage vertical en CSS

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>

Copier après la connexion

Rendu :

Comment définir le centrage vertical en CSS

2. Utiliser la mise en page flexible

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

Copier après la connexion

Rendu :

(Partage vidéo d'apprentissage :
tutoriel vidéo CSS
)
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!