Maison > Article > interface Web > Comment centrer un div horizontalement et verticalement sur l'écran
Cet article vous présentera comment centrer un div horizontalement et verticalement sur l'écran. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
Récemment, lors de la rédaction de pages Web, il est souvent nécessaire d'afficher p au centre de l'écran, j'ai donc enregistré quelques méthodes courantes, qui sont relativement simples.
Ajoutez simplement la balise <center></center>
pour le centrage horizontal, ou définissez margin:auto;
Bien sûr, vous pouvez également utiliser les méthodes suivantes
Voici deux méthodes pour centrer l'écran (centrage horizontal + vertical). centrage)
Mettez le code html de démonstration :
<body> <p class="main"> <h1>MAIN</h1> </p> </body>
p Utilisez la mise en page absolue, définissez margin:auto;
et définissez haut, gauche, droite, bottom Les valeurs peuvent être égales , pas nécessairement toutes à 0.
.main{ text-align: center; /*让p内部文字居中*/ background-color: #fff; border-radius: 20px; width: 300px; height: 350px; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
L'effet est comme indiqué ci-dessous :
.main{ text-align: center; background-color: #fff; border-radius: 20px; width: 300px; height: 350px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
<center></center>
la plus simple, mais elle est obsolète : <p><center>123</center></p>
Cette balise <center></center>
est relative au texte de la balise <p></p>
et peut être centrée.
La balise centrale étant obsolète, il n'est pas recommandé de l'utiliser de manière formelle. Vous pouvez utiliser la méthode suivante à la place :
<p style="text-align:center;">123</p>
Apprentissage recommandé : Tutoriel vidéo HTML<.>
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!