Maison >interface Web >tutoriel HTML >Comment centrer verticalement un div en CSS
Comment centrer verticalement un div en CSS
- php中世界最好的语言original
- 2017-11-27 09:54:421648parcourir
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
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;
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>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: '';
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%;
}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>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;
}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>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%);
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%);
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;
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>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;}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!