Partagez six méthodes de centrage vertical et horizontal en CSS

Résume plusieurs façons d'obtenir le centrage CSS Remarque : * est la méthode courante, "wrap" est le conteneur et "div" est l'élément à centrer.

*1.Positionnement absolu, le code suivant peut être implémenté lorsque la largeur et la hauteur sont connues, ou vous pouvez utiliser des marges négatives ; 🎜>

.div { 
    width: 200px;
    height: 200px;
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
}

2. Sans connaître la largeur et la hauteur de l'élément, sachez simplement qu'un certain div est la moitié de son parent, centré horizontalement et verticalement, et agrandi ou réduit proportionnellement à la taille de l'élément. élément parent.

.div{
    position: absolute;
    left: 30%;
    right:30%;
    top: 25%;
    bottom:25%;
}

*3.translate, lorsque la largeur est connue et la hauteur est inconnue

.wrap{
    width:200px;//也可以不写，默认占总宽度的50%
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
}

4.table-cell, lorsque la hauteur du div lui-même est inconnue et seulement le centrage vertical est obtenu, ps, dans ce cas, la largeur du div est de 100%

.wrap{//外层容器
    display: table;
}
.div{//内层容器
    display: table-cell; 
    vertical-align: middle; 
}

*5.flex layout Si la largeur n'est pas fixe, définissez simplement display:flex dans le conteneur parent.

.wrap{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;   
}

6. Méthode de piratage, soyez doué pour utiliser

:after.

.wrap {  
    text-align: center; 
    overflow: auto; 
}   
.wrap:after, 
.div { 
    display: inline-block; 
    vertical-align: middle; 
}   
.div:after { 
    content: ''; 
    height: 100%; 
    margin-left: -0.25em; /* 需要根据不同的字号做调整 */ 
}   
.wrap { 
    max-width: 99%; /* 防止文档过长时会到容器的顶部 */ 
    max-width: calc(100% - 0.25em) /* Only for IE9+ */  
}

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!