Introduction à l'utilisation de CSS pour centrer les div horizontalement et verticalement

Il existe de nombreuses solutions pour réaliser le centrage. Nous présentons ici la solution du CSS pur utilisant l'absolu et la marge.

1. p la largeur et la hauteur sont fixes

width: 400px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -200px;

la marge supérieure est -(hauteur / 2), la marge gauche est -(largeur / 2) . Bien sûr, vous ne pouvez pas utiliser margin, c'est-à-dire que top est calc(100% - height) / 2, left est calc(100% - width) / 2, mais il est recommandé de ne pas utiliser calc() si vous le pouvez.

2. La largeur et la hauteur ne sont pas fixes

width: 50%;
height: 50%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;

Notez que cela s'applique aux situations où la largeur et la hauteur doivent être spécifiées, comme l'utilisation de pourcentages. ou en utilisant jsModification dynamique, sinon elle peut être traitée comme 100%.

Vous pouvez également utiliser Translate() sans marge, comme suit :

width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);

3. CSS3 à largeur variable, centrage horizontal et vertical

justify-content: center; /* 子元素水平居中 */
align-items: center;     /* 子元素垂直居中 */
display: -webkit-flex;

Ajoutez-le à l'élément parent pour centrer les éléments enfants horizontalement et verticalement.

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!