Maison > Article > interface Web > Comment centrer un div horizontalement et verticalement sur l'écran
Comment centrer un div horizontalement et verticalement sur l'écran
- 醉折花枝作酒筹avant
- 2021-04-25 18:25:245050parcourir
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>
- Méthode 1 :
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 : 
- Méthode 2 :
Toujours une mise en page absolue, laissez gauche et haut être tous deux à 50 %, ce qui est dans la direction horizontale. Laissez la distance entre l'extrême gauche de p et l'extrême gauche de l'écran être de 50 %, ce qui est la même dans la direction verticale, utilisez donc transform pour traduire 50 % de sa propre largeur (hauteur) vers le à gauche (en haut), et l'effet de centrage sera obtenu. Les rendus sont les suivants. Idem que ci-dessus.
.main{
text-align: center;
background-color: #fff;
border-radius: 20px;
width: 300px;
height: 350px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}- Troisième méthode :
Pour le centrage horizontal, vous pouvez utiliser la balise<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!