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!
utilisation de la fonction stripslashes
que signifie l'interface USB
Comment résoudre les problèmes lors de l'analyse des packages
Temps de panne du service Windows 10
Pilote de carte son pour ordinateur portable
Comment utiliser le sommeil php
Introduction à la différence entre javascript et java
Quelle est la fonction du téléphone portable NFC ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
