Résumé des différentes méthodes de mise en page centrée utilisant CSS

Cet article résume diverses méthodes de mise en page de centrage utilisant CSS. Les amis intéressés peuvent se référer à

Cet article traite de la situation dans laquelle la situation de centrage est définie sur une largeur totale et une largeur de contenu variables. (Toujours centré une fois redimensionné).

Remarque spéciale : lors de la définition de position:absolute; sur un élément pour définir l'effet de centrage, en plus de la méthode css3 présentée dans le blog, vous pouvez également utiliser une marge négative pour centrer. Cela résout le problème de compatibilité, mais convient uniquement aux situations où la largeur et la hauteur sont connues (car un décalage négatif correspond à la moitié de la largeur et de la hauteur de l'élément). Lorsque la largeur et la hauteur changent, il n'y a plus d'effet centré.

Les éléments enfants de ces mises en page ont par défaut la largeur du contenu en raison de leurs paramètres d'attribut.

Tous les exemples de centrage dans cet article traitent uniquement de l'implémentation du CSS. Le code html est unifié comme suit :

<p class="parent">   
    <p class="child">demo</p>   
</p>

1. 🎜>

1.1 bloc en ligne avec alignement du texte

.parent{   
    text-align: center;   
}   
.child{   
    display: inline-block;   
}

Avantages : La compatibilité est très bonne Il suffit d'ajouter *display:inline et *zoom:1 dans le css de l'élément enfant pour être compatible avec IE6 et 7. Inconvénients : Le texte interne ; sera également centré horizontalement, ce qui nécessite d'éliminer l'impact.

Tableau 1.2 avec marge

.child{   
    display:table;   
    margin: 0 auto;   
}

Avantages : Le paramétrage est très simple , uniquement Les sous-éléments doivent être définis pour prendre en charge IE8. Lors de la prise en charge de IE6 et 7, les sous-éléments peuvent être remplacés par une structure de table.

1.3 abasolute avec transformation

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    left:50%;   
    transform: translateX(-50%);   
}

Avantages : L'élément centré ne travailler avec d'autres éléments Avoir un impact. Inconvénients : les nouveaux attributs CSS3 prennent en charge IE9, mais les navigateurs de versions inférieures ne le prennent pas en charge.

2. Centrage vertical

2.1 cellule de tableau avec alignement vertical

.parent{   
    display: table-cell;   
    vertical-align:middle;   
}

Avantages : Facile à configurer, il suffit de définir l'élément parent, compatible avec IE8, lorsque vous devez être compatible avec d'autres navigateurs, vous peut remplacer p C'est une structure de table.

2.2 absolu avec transform

.parent{   
    position:relative;   
}   
.child{   
    position:absolute;   
    top: 50%;   
    transform: translateY(-50%);   
}

Avantages : L'élément centré n'est pas aligné avec d'autres éléments. Avoir un impact. Inconvénients : les nouveaux attributs CSS3 prennent en charge IE9, mais les navigateurs de versions inférieures ne le prennent pas en charge.

3. Centrage horizontal et vertical

3.1 bloc en ligne avec alignement du texte et cellule de tableau avec alignement vertical

.parent{   
    display: table-cell;   
    vertical-align:middle;   
    text-align:center;   
}   
.child{   
    display: inline-block;   
}

Avantages : Combinant les deux premières méthodes, il a une bonne compatibilité ! Prend en charge IE8 et est compatible avec les navigateurs de version inférieure. Inconvénients : La configuration est plus compliquée.

3.2 absolu avec transformation

.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    left: 50%;   
    top: 50%;   
    transform: translate(-50%,-50%);   
}

Avantages : L'élément centré n'est pas aligné avec d'autres éléments. Avoir un impact. Inconvénients : les nouveaux attributs CSS3 prennent en charge IE9, mais les navigateurs de versions inférieures ne le prennent pas en charge.

4. Flex tout-en-un

css3 a de nouveaux attributs de mise en page La mise en page est simple et puissante, mais les performances sont légèrement pires. et est principalement utilisé sur les terminaux mobiles.

4.1 Centrage horizontal

/*当父元素设置display: flex;时，子元素为flex-item，默认为内容宽度。*/  
.parent{   
    display: flex;   
    justify-content: center;   
}   
/* 在设置子元素为margin: 0 auto;时，可删除父元素的justify-content: center;同样可以达到居中效果*/  
/*  .child{
        margin: 0 auto;   
    }*/

4.2 Centrage vertical

.parent{   
    display: flex;   
    align-items: center;   
}

4.3 Centrage horizontal et vertical

parent{       
    display: flex;       
    justify-content: center;       
    align-items: center;       
}       
/*如同flex布局的第一部分一样这里也可以对子元素进行下面的设置：同时删除上面的除去display外的其他属性*/      
/*  .child{   
        margin:auto;     
    } */

C'est tout pour cet article L'intégralité du contenu, j'espère qu'il sera utile à l'étude de chacun.

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!