Comment centrer verticalement un div en CSS-tutoriel HTML-php.cn

Comment centrer verticalement un div en CSS

php中世界最好的语言

Libérer： 2017-11-27 09:54:42

original

1644 Les gens l'ont consulté

Si un div avec une hauteur et une largeur fixes est centré verticalement sur la page Web, cela doit être très simple, je pense que tout le monde peut facilement l'écrire. Mais s'il s'agit d'un div avec une hauteur et une largeur fixes, comment le faire verticalement. le centrer ? Alors, comment ces divs sont-ils centrés verticalement ? Dans cet article, je vais résumer

Hauteur et largeur fixes div centrées verticalement

enter image description here

Copier après la connexion

Comme indiqué ci-dessus, la hauteur et la largeur fixes sont très simples, s'écrivent comme suit :

 position: absolute;
 left: 50%;
 top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

Copier après la connexion

Méthode pour centrer verticalement des divs sans hauteur ni largeur fixes

Méthode 1 :

Utiliser un pseudo-élément "fantôme" (pseudo-élément invisible) et un bloc en ligne / vertical-align Il peut être installé au centre, ce qui est très astucieux. Cependant, cette méthode nécessite que l'élément à centrer soit un bloc en ligne, ce qui n'est pas une solution véritablement universelle.

html est le suivant :

<div style="height: 300px;">
    <div>
        <h1>haorooms案例题目</h1>
        <p>haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容</p>
    </div>
</div>

Copier après la connexion

css est le suivant :

/* This parent can be any width and height */
.block {
  text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: &#39;&#39;;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}

Copier après la connexion

Méthode 2 :

Vous pouvez utiliser la méthode de mise en page du tableau , mais cette méthode a aussi des limites !

s'écrit comme suit :

<table style="width: 100%;">
  <tr>
     <td style="text-align: center; vertical-align: middle;">
          Unknown stuff to be centered.
     </td>
  </tr>
</table>

Copier après la connexion

Comme l'écriture d'un tableau prend plus de temps, vous pouvez également utiliser div au lieu de table, écrit comme suit :

html :

<div>
   <div>
       Unknown stuff to be centered.
   </div>
</div>
css:
.something-semantic {
   display: table;
   width: 100%;
}
.something-else-semantic {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
}

Copier après la connexion

Troisième méthode, la solution ultime :

Les deux méthodes ci-dessus peuvent avoir leurs limites. La troisième méthode que j'ai présentée est une méthode plus mature de centrage vertical qui n'est pas une hauteur fixe. et largeur div ! Mais la méthode est écrite en CSS3. Pour les enfants qui souhaitent être compatibles avec IE8, il est recommandé d'utiliser la méthode ci-dessus !

La méthode est similaire à notre hauteur et largeur fixes, mais sans marge nous utilisons translate()

La démo est la suivante :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>haorooms不固定高度div写法</title>
    <style>
.center {
  position: fixed;
  top: 50%;
  left: 50%;
  background-color: #000;
  width:50%;
  height: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
}
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

Mon css ci-dessus est uniquement pour les navigateurs webkit Kernel, les autres navigateurs noyau sont écrits comme suit :

-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

Copier après la connexion

Concernant l'écriture de chaque navigateur, vous pouvez lire mon article précédent : http://www.haorooms.com/post/css_common

Certains styles de calques contextuels peuvent également être centrés à l'aide de cette méthode

position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);

Copier après la connexion

largeur variable CSS3, niveau élevé, centrage vertical

Vous pouvez obtenir une largeur variable en seulement trois phrases Largeur centrée horizontalement verticalement.

justify-content:center;//子元素水平居中
align-items:center;//子元素垂直居中
display:-webkit-flex;

Copier après la connexion

Ajoutez les trois phrases ci-dessus à l'élément parent pour obtenir un centrage horizontal et vertical des éléments enfants.

Utiliser margin:auto pour le centrage vertical

Définir la valeur de la marge sur auto nous permet d'allouer l'espace restant ! Nous savons que les éléments au niveau du bloc sont définis sur margin:0 auto ; ils peuvent être affichés à gauche, à droite et centrés ! Existe-t-il un moyen de centrer la marge en haut, en bas, à gauche et à droite après l'avoir définie sur margin:auto ? En centrant le haut, le bas, la gauche et la droite, nous pouvons réaliser notre centrage vertical !

La réponse est oui, tant que nous prévoyons suffisamment d'espace en haut et en bas, nous pouvons laisser margin allouer automatiquement l'espace supérieur et inférieur.

Nous pouvons utiliser le positionnement pour donner à la marge suffisamment d'espace en haut, en bas, à gauche et à droite ! Ensuite, vous pouvez utiliser margin:auto pour réaliser un centrage vertical !

L'implémentation du HTML est la suivante : (créer une simple boîte pop-up verticale)

<div>
    <div></div>
</div>

Copier après la connexion

Le code CSS est le suivant, il est très simple et a une bonne compatibilité. prend en charge IE8+

.father{position:fixed;width:100%;height:100%;top;0;left:0;background-color:rgba(0,0,0,.7);}
.son{position: absolute;top:0;left:0;bottom:0;right:0;width:50%;height:50%;margin:auto;background-color:red;}

Copier après la connexion

De cette façon, vous pouvez réaliser un centrage vertical, n'est-ce pas très simple ? Pour un contenu plus passionnant, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture connexe :

Comment réaliser l'effet pop-up du texte d'invite en CSS3

CSS3 Comment implémenter l'animation de frappe en

Comment implémenter l'effet d'animation de chargement en CSS3

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!