Le contenu de cet article explique comment réaliser un centrage vertical et horizontal (code) d'éléments de taille inconnue en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .
Idée : Positionnez l'élément enfant de manière absolue, 50 % à partir du haut, 50 % à partir de la gauche, puis utilisez css3 transform:translate(-50%; -50%)
Avantages : Haut de gamme , peut être utilisé dans le noyau du webkit Inconvénients de l'utilisation de
dans les navigateurs : L'attribut transform n'est pas pris en charge sous IE9
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>未知宽高元素水平垂直居中</title>
</head>
<style>
.parent3{
position: relative;
height:300px;
width: 300px;
background: #FD0C70;
}
.parent3 .child{
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<p class="parent3">
<p class="child">hello world-3</p>
</p>
</body>
</html>Recommandations associées :
Exemples de code CSS sélecteurs et codes de priorité CSS Exemple
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!
Comment trier dans Excel
Comment déclencher un événement de pression de touche
Classement des applications de la plateforme de trading de devises virtuelles
Comment connecter PHP à la base de données mssql
Que dois-je faire si mon lecteur C devient rouge ?
Introduction aux modificateurs de contrôle d'accès Java
Comment résoudre l'exception de débordement de pile Java
référencement wordpress
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
