Maison > Article > interface Web > Comment réaliser le centrage en CSS si la largeur et la hauteur ne sont pas fixes
Comment réaliser le centrage en CSS si la largeur et la hauteur ne sont pas fixes
- 藏色散人original
- 2020-12-17 10:09:012934parcourir
Méthodes pour réaliser le centrage en CSS avec une largeur et une hauteur non fixes : 1. Utilisez flex pour la mise en page afin d'obtenir le centrage ; 2. Utilisez la transformation en CSS3 pour décaler les éléments ; 3. Utilisez table-cell pour réaliser le centrage.
L'environnement d'exploitation de ce tutoriel : Système Windows 7, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.
Recommandé : "Tutoriel vidéo CSS"
Comment réaliser un centrage en CSS avec une largeur et une hauteur non fixes ?
Méthode 1 : Utiliser flex pour la mise en page
La première réaction de chacun peut être flex. Parce que sa méthode d’écriture est assez simple et intuitive, et qu’il n’y a aucun problème de compatibilité. C'est le premier choix pour le centrage sur les téléphones mobiles.
<div class="wrapper flex-center">
<p>horizontal and vertical</p>
</div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
.flex-center {
display: flex;
justify-content: center;
align-items: center;
}utilise deux attributs clés : justifier-content et align-items, tous deux définis sur center pour obtenir le centrage.
Il est à noter que le flex-center doit ici être accroché à l'élément parent pour centrer le seul élément enfant.
Méthode 2 : Utiliser position+transform
Utiliser principalement la transformation en CSS3 pour le décalage des éléments, l'effet est très bon
Cette méthode est très puissante et flexible, non seulement limité à la réalisation d’un affichage centré. En termes de compatibilité, IE est également utilisé à des fins de comparaison. La deuxième méthode peut être utilisée par IE8 et supérieur. Des problèmes surviendront dans IE8 et versions antérieures.
<body>
<div id="box">
<div id="content">div被其中的内容撑起宽高</div>
</div>
</body>
body,html { margin:0; width:100%; height:100%; }
#box { width:100%; height:100%; background:rgba(0,0,0,0.7); position:relative; }
#content{ position:absolute; background:pink; left:50%; top:50%;
transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%); }Méthode 3 : Utiliser table-cell
Utiliser l'effet de centrage des cellules du tableau pour afficher. Comme flex, il doit être écrit sur l'élément parent.
<div class="wrapper">
<p>horizontal and vertical</p>
</div>
.wrapper {
width: 300px;
height: 300px;
border: 1px solid #ccc;
display: table-cell;
text-align: center;
vertical-align: middle;
}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!