Maison > Article > interface Web > Comment définir div centré verticalement en CSS
Comment définir div centré verticalement en CSS
- coldplay.xixioriginal
- 2021-04-29 11:09:574432parcourir
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.
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;
}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>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 dc6dce4a544fdca2df29d5ac0ea9906b. Vous pouvez utiliser un code similaire à celui-ci :
div {
padding:25px;
}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">现在我们要使这段文字垂直居中显示！