Comment définir div centré verticalement en CSS-tutoriel CSS-php.cn

Comment définir div centré verticalement en CSS

coldplay.xixi

Libérer： 2021-04-29 11:09:57

original

4483 Les gens l'ont consulté

Comment définir le centrage vertical d'un div en utilisant CSS : 1. Définissez sa hauteur réelle pour qu'elle soit égale à la hauteur de la ligne [line-height] 2. Définissez le remplissage de manière à ce que le haut et le bas soient définis. les valeurs de remplissage sont les mêmes.

Comment définir div centré verticalement en CSS

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Méthode CSS pour définir le centrage vertical div :

1. Centrage vertical sur une seule ligne

S'il n'y a qu'une seule ligne. de texte dans un conteneur, il est relativement simple de le centrer. Il suffit de définir sa hauteur réelle pour qu'elle soit égale à la hauteur de la ligne de la ligne.

Tel que :

div {  
height:25px;  
line-height:25px;  
overflow:hidden;  
}

Copier après la connexion

Ce code est très simple. Le paramètre overflow:hidden est utilisé ultérieurement pour empêcher le contenu de dépasser le conteneur ou de provoquer un retour à la ligne automatique, de sorte que l'effet de centrage vertical soit utilisé plus tard. ne peut être atteint.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<title> 单行文字实现垂直居中 </title>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<style type="text/css">
　　　　body { font-size:12px;font-family:tahoma;}
　　div {
　　　　height:25px;
　　　　line-height:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　}
　　</style>
</head>
<body>
　　<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>

Copier après la connexion

2. Centrage vertical de plusieurs lignes de texte de hauteur inconnue

Si la hauteur d'un élément de contenu est variable, alors nous pouvons utiliser la méthode mentionnée dans la section précédente La dernière méthode utilisée pour obtenir un centrage horizontal consiste à définir le remplissage de manière à ce que les valeurs de remplissage supérieure et inférieure soient les mêmes. Encore une fois, cela "ressemble" à un centrage vertical ; c'est juste une façon de faire en sorte que le texte remplisse complètement le

. Vous pouvez utiliser un code similaire à celui-ci :

div {  
padding:25px;  
}

Copier après la connexion

L'avantage de cette méthode est qu'elle peut s'exécuter sur n'importe quel navigateur, et le code est très simple, mais la condition préalable à cette méthode est que la hauteur du conteneur doit être évolutif.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
　　<title> 多行文字实现垂直居中 </title>
　　<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
　　<style type="text/css">
　　　　body { font-size:12px;font-family:tahoma;}
　　　　div {
　　　　padding:25px;
　　　　border:1px solid #FF0099;
　　　　background-color:#FFCCFF;
　　　　width:760px;
　　}
　　</style>
</head>
<body>
　　<div><br>　　　　<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！

Copier après la connexion