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!
emplacement.hash
site officiel de notepad++
introduction au fichier hiberfil
Solution au problème selon lequel le système Win7 ne peut pas démarrer
Introduction aux logiciels de dessin architectural
Méthodes de chiffrement courantes pour le stockage de données chiffrées
quel fichier est iso
Comment démarrer le service MySQL
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
