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

5047 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