CSS pour réaliser le centrage horizontal et vertical des éléments

Dans notre projet actuel, il existe de nombreuses méthodes de centrage vertical Par exemple, il existe de nombreuses invites contextuelles sur la page mobile. suit. J'espère que cela pourra aider tout le monde.
J'ai fait beaucoup de pages et j'ai l'impression que le problème du centrage vertical a toujours existé. J'ai l'impression que certaines méthodes sont relativement simples et que certaines doivent être calculées en fonction de la situation réelle. la méthode que j'ai utilisée dans la pratique, qui n'est peut-être pas la plus complète, mais l'effet pratique est toujours bon.

Arrêtez de dire des bêtises et passez directement au code :

/* 常用的三种方法 */

/* 第一种 */
div{
	width: 200px;
	height: 200px;
	margin: auto;
	background: pink;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/* 第二种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}
/* 第三种 */
div{
	width: 200px;
	height: 200px;
	background: green;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

Implémentez simplement la partie html directement

Recommandations associées :

Analyse du style de barre de défilement du contrôle CSS

Exemple détaillé du style de barre de défilement personnalisé CSS3

Exemple de définition CSS du style de barre de défilement div

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!