Partagez neuf méthodes CSS pures pour réaliser un centrage vertical

Cet article se concentre sur le centrage vertical et présente principalement diverses méthodes de centrage vertical. Je pense qu'il y en a toujours une dont vous avez besoin. Les amis intéressés peuvent s'y référer. J'espère qu'il vous sera utile.

Le centrage vertical est l'un des effets très courants dans la mise en page. Afin d'obtenir une bonne compatibilité, la méthode pour obtenir un centrage vertical sur PC passe généralement par le positionnement absolu, la cellule de tableau, les marges négatives, etc. . Avec CSS3, le centrage vertical pour les terminaux mobiles est plus diversifié.

Méthode 1 : tableau-cellule

structure html :

<div class="box box1">
        <span>垂直居中</span>
</div>

css :

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

Méthode 2 : display:flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

Méthode 3 : Positionnement absolu et marges négatives

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

Méthode 4 : Positionnement absolu et 0

.box4 span{
  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}

Cette méthode est quelque peu similaire à celle ci-dessus, mais ici, le centrage est obtenu en définissant margin:auto et top, left, right et bottom sur 0. C'est incroyable. Cependant, vous devez ici déterminer la hauteur des éléments internes. Vous pouvez utiliser des pourcentages, ce qui est plus adapté aux terminaux mobiles.

Méthode 5 : traduire

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }

Il s'agit en fait d'une variante de la méthode 3, et le changement est obtenu grâce à la traduction.

Méthode 6 : display:inline-block

.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

Cette méthode est vraiment astucieuse... Utilisez :after pour occuper l'espace.

Méthode 7 : display:flex et margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}

Méthode 8 : display:-webkit-box

.box9{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
}

CSS3 est large et profond et peut produire de nombreux effets créatifs, il doit donc être étudié attentivement.

Méthode 9 : display:-webkit-box

Dans cette méthode, un div est inséré à l'extérieur de l'élément de contenu. Définissez cette hauteur de div : 50 % ; margin-bottom : -contentheight ;.

le contenu efface le flottant et l'affiche au milieu.

<div class="floater"></div>  
<div class="content"> Content here </div>  
.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}

Avantages :

Applicable à tous les navigateurs

Quand il n'y a pas assez d'espace (par exemple : la fenêtre est réduite) le contenu ne sera pas tronqué et le la barre de défilement apparaîtra

Inconvénients :

La seule chose à laquelle je peux penser est la nécessité d'éléments vides supplémentaires (pas si mal, un autre sujet pour une autre fois)

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!