Comment réaliser le centrage en CSS si la largeur et la hauteur ne sont pas fixes-tutoriel CSS-php.cn

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

藏色散人

Libérer： 2020-12-17 10:09:01

original

2935 Les gens l'ont consulté

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;
}

Copier après la connexion

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%); }

Copier après la connexion

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;
}

Copier après la connexion

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!