Maison > Article > interface Web > HTML centre les éléments horizontalement et verticalement
HTML centre les éléments horizontalement et verticalement
- 高洛峰original
- 2017-02-27 10:43:421042parcourir
Lorsque nous concevons la page, nous affichons souvent le p au centre et l'affichons horizontalement et verticalement par rapport à la fenêtre de la page, par exemple en centrant la fenêtre de connexion.
Jusqu'à présent, de nombreuses méthodes ont été explorées.
HTML :
<body>
<p class="maxbox">
<p class="minbox align-center"></p>
</p>
</body>Rendu (les méthodes suivantes ont le même rendu) :
Le premier type : le positionnement absolu CSS
utilise principalement le positionnement absolu, puis utilise la marge pour s'ajuster à la position médiane.
Élément parent :
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Élément enfant :
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Alignement central vertical horizontal :
.align-center{
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px; /*width/-2*/
margin-top: -100px; /*height/-2*/
}
Deuxième type : positionnement absolu CSS Javascript/JQuery
Utilisez principalement le positionnement absolu, puis utilisez Javascript/JQuery pour vous ajuster à la position médiane. Par rapport à la première méthode, cette méthode améliore la flexibilité de la classe.
Élément parent :
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Élément enfant :
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Alignement central vertical horizontal :
.align-center{
position: absolute;
left: 50%;
top: 50%;
} JQuery :
$(function(){
$(".align-center").css(
{
"margin-left": ($(".align-center").width()/-2),
"margin-top": ($(".align-center").height()/-2)
}
);
});Troisième type : déplacement de positionnement absolu CSS3
L'utilisation du positionnement absolu est la même que la transformation CSS3 : traduire L'effet peut également être obtenu.
Élément parent :
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Élément enfant :
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}Alignement central vertical horizontal :
.align-center{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); /*向左向上位移*/
} Quatrième type : Flexbox : [Modèle de boîte de disposition télescopique]
Il est trop facile pour le modèle Flexbox de réaliser des éléments horizontaux et verticaux.
Vous devez modifier le code HTML ici :
<p class="maxbox align-center">
<p class="minbox"></p>
</p>Élément parent :
.maxbox{
position: relative;
width: 500px;
height: 500px;
margin: 5px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Élément enfant :
.minbox{
width: 200px;
height: 200px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);
}
Alignement central horizontal et vertical :
.align-center{
display: flex;
display: -webkit-flex; /*兼容问题*/
justify-content: center;
align-items: center;
}
Comparaison de plusieurs méthodes :
Le premier CSS L'ajustement absolu de la marge de positionnement a une bonne compatibilité mais manque de flexibilité. Si de nombreuses cases doivent être centrées horizontalement et verticalement, des .align-center différents doivent être écrits en raison de leur largeur et de leur hauteur différentes.
Le second utilise un langage de script, qui présente une bonne compatibilité et compense les défauts du premier. L'effet du centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
Le troisième utilise de nouvelles propriétés de CSS3 et est compatible avec IE10, Chrome, Firefox et Opera. La compatibilité n'est pas très bonne et l'effet de centrage horizontal et vertical ne sera pas affecté par les changements de largeur et de hauteur.
Grâce au modèle Flexbox, compatible avec Firefox, Opera et Chrome, IE est complètement anéanti. Cela n'affecte pas non plus l'effet de centrage horizontal et vertical en raison des changements de largeur et de hauteur.
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.
Pour plus d'articles liés au HTML sur le centrage horizontal et vertical des éléments, veuillez faire attention au site Web PHP chinois !