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:012896parcourir

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.

Comment réaliser le centrage en CSS si la largeur et la hauteur ne sont pas fixes

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Comment utiliser la tarte CSS3Article suivant:Comment utiliser la tarte CSS3