Cinq méthodes pour réaliser un centrage vertical du contenu dans les divs

1. Méthode de la hauteur de ligne

S'il n'y a qu'une seule ligne ou quelques mots à centrer verticalement, alors c'est la plus simple à réaliser, il suffit de laisser le texte La hauteur de la ligne est la même que la hauteur du conteneur, par exemple :

p { height:30px; line-height:30px; width:100px; overflow:hidden; }

Ce code peut obtenir l'effet de centrer le texte verticalement dans le paragraphe.

2. Méthode de remplissage

Une autre méthode est très similaire à la méthode de la hauteur de ligne. Elle convient également pour qu'une ou plusieurs lignes de texte soient centrées verticalement. centrer verticalement le contenu. Centré, par exemple :

p { padding:20px 0; }

L'effet de ce code est similaire à la méthode de la hauteur de ligne.

3. Méthode Simuler une table

Définissez le conteneur sur display:table, puis définissez l'élément enfant, c'est-à-dire l'élément à afficher verticalement au centre, sur display:table-cell , puis ajoutez vertical- align:middle pour obtenir.

La structure html est la suivante :

<p id="wrapper">
    <p id="cell">
        <p>测试垂直居中效果测试垂直居中效果</p>
        <p>测试垂直居中效果测试垂直居中效果</p>
    </p></p>

Code CSS :

#wrapper {display:table;width:300px;height:300px;background:#000;margin:0 auto;color:red;}#cell{display:table-cell; vertical-align:middle;}

Malheureusement, IE7 et versions antérieures ne sont pas pris en charge.

Quatre. La transformation CSS3 pour implémenter

le code CSS est la suivante :

.center-vertical{
  position: relative;
  top:50%;
  transform:translateY(-50%);
}.center-horizontal{
  position: relative;
  left:50%;
  transform:translateX(-50%); 
}

Cinq : méthode de boîte CSS3 pour implémenter le centrage horizontal et vertical

code html :

<p class="center">
  <p class="text">
    <p>我是多行文字</p>
    <p>我是多行文字</p>
    <p>我是多行文字</p>
  </p></p>

code css :

.center {
  width: 300px;
  height: 200px;
  padding: 10px;
  border: 1px solid #ccc;
  background:#000;
  color:#fff;
  margin: 20px auto;
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  
  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;
  
  display: -o-box;
  -o-box-orient: horizontal;
  -o-box-pack: center;
  -o-box-align: center;
  
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
  
  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}

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!