Comment centrer un div horizontalement et verticalement sur l'écran-tutoriel HTML-php.cn

Comment centrer un div horizontalement et verticalement sur l'écran

醉折花枝作酒筹

Libérer： 2021-04-25 18:25:24

avant

4881 Les gens l'ont consulté

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>

Copier après la connexion

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;
}

Copier après la connexion

L'effet est comme indiqué ci-dessous :
Comment centrer un div horizontalement et verticalement sur lécran

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%);
}

Copier après la connexion

Troisième méthode :
Pour le centrage horizontal, vous pouvez utiliser la balise <center> la plus simple, mais elle est obsolète :

<p><center>123</center></p>

Copier après la connexion

Cette balise <center> est relative au texte de la balise  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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment centrer un div horizontalement et verticalement sur l'écran