Lorsque nous développerons la page front-end, afin de rendre la page belle, il y aura des endroits où l'effet de centrage vertical sera requis. Dans ce chapitre, apprenons comment définir le centrage vertical à l'aide de CSS et présentons en détail plusieurs méthodes de définition du centrage vertical du texte et des zones div. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
Manuel recommandé : Manuel CSS en ligne
1 : Comment définir up css Centrer le texte verticalement
1. line-height Centrer le texte verticalement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
}
</style>
</head>
<body>
<div class="box">css 垂直居中了--文本文字</div>
</body>
</html>Rendu :
Cela permettra au texte du div d'être centré horizontalement et verticalement
2. Disposition flexible CSS3 pour centrer le texte verticalement
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height:300px;
/*设置为伸缩容器*/
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 :
Articles connexes recommandés :
1.Comment obtenir l'effet de centrage vertical de Div
2.balise div : mise en place du centrage horizontal et du centrage vertical (avec code)
Recommandations vidéo associées :
1.Tutoriel vidéo CSS - Édition Jade Girl Heart Sutra
2 : Comment définir up div box with css Centrer verticalement le conteneur (élément de bloc)
1 Utilisez le positionnement absolu et les marges négatives pour centrer verticalement l'élément de niveau bloc . (Connaissant déjà la hauteur de l'élément)
Si on connaît la hauteur de l'élément, on peut réaliser un centrage vertical comme ceci :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 150px;
height: 100px;
background: orange;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中</div>
</div>
</body>
</html>Rendu :
Cette méthode a bonne compatibilité, mais il y a un petit inconvénient : la taille de l'élément centré au niveau du bloc doit être connue à l'avance, sinon le centrage vertical ne peut pas être obtenu avec précision.
2. Utiliser le positionnement absolu et transformer (hauteur de l'élément inconnue)
Si nous ne connaissons pas la hauteur de l'élément, alors nous il faut d'abord changer l'élément Positionnez le centre du conteneur, puis utilisez 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 :
Un avantage très évident de cette méthode est que vous n'avez pas besoin de connaître la taille de l'élément centré à l'avance, car le pourcentage de décalage de translation dans le la transformation est relative à la taille de l'élément lui-même.
3. Positionnement absolu combiné avec marge : auto
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
.child{
width: 200px;
height: 100px;
background: orange;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中...</div>
</div>
</body>
</html>Rendu :
Cette méthode nécessite d'abord de positionner l'élément de manière à ce qu'il soit centré verticalement de manière absolue par rapport à l'élément parent, et de définir haut et bas sur des valeurs égales, quelle que soit la valeur à laquelle ils sont définis, tant qu'ils sont égaux. être centré sur auto. Cela permet un centrage vertical. La largeur et la hauteur de l'élément centré n'ont pas besoin d'être définies, mais si elles ne sont pas définies, il doit s'agir d'un élément tel qu'une image qui contient sa propre taille, sinon il ne peut pas être implémenté.
4. Utilisez le remplissage pour obtenir le centrage vertical des éléments enfants
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css 垂直居中</title>
<style>
.box{
width: 300px;
background: #ddd;
padding: 100px 0;
}
.child{
width: 200px;
height: 100px;
background: orange;
line-height: 100px;
}
</style>
</head>
<body>
<div class="box">
<div class="child">css 垂直居中了</div>
</div>
</body>
</html>Rendu :
这种实现方式非常简单，就是给父元素设置相等的上下内边距，则子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确的垂直居中。这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
5. 使用flex布局
<!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>效果图：
关于flex布局（弹性布局/伸缩布局）里门道颇多，这里先针对用到的东西简单说一下：
flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
元素可以通过设置display:flex;将其指定为flex布局的容器，指定好了容器之后再为其添加align-items属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
flex-start:：交叉轴的起点对齐；
flex-end：交叉轴的终点对齐；
center：交叉轴的中点对齐；
baseline：项目第一行文字的基线对齐；
stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度。
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
