Comment définir l'alignement central CSS

Comment définir l'alignement central CSS : 1. Centrage horizontal [text-align:center] ; 2. Centrage horizontal [margin : 0 auto] ; 3. Centrage vertical [line-height] ; , centrage horizontal et vertical ; 5. Disposition flexible, centrage horizontal et vertical ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3, ordinateur DELL G3.

Comment définir l'alignement central CSS :

1. text-align:center - centrage horizontal

Uniquement pour le texte, les images, les boutons, etc. . Les éléments en ligne sont valides (l'affichage est défini sur inline ou inline-block, etc.) pour le centrage horizontal

2, margin: 0 auto —— Le centrage horizontal

n'est centré qu'horizontalement, et n'est pas valide pour le positionnement des éléments flottants

 .father{
           width:500px;
           height:200px;
           background-color::#f98769;
           overflow:hidden;//不可缺少否则margin-top不生效
       }
        .son{
            width: 100px;
            height: 100px;
            margin:50px auto ;
            background-color: #ff0000;
        }

3. line-height - centrage vertical

line-height=height, valable uniquement pour une ligne de texte

4. table - centrage horizontal et vertical

Les attributs align='center' et valign='middle' de td/th peuvent être centrés horizontalement et verticalement

Disposition flexible - centrage horizontal et vertical.

.father{
display:flex;
justity-content:center;
align-items:center;
}
.father{
display:flex;
flex-direction:column;//改变主轴为cross axis
justity-content:center;
}

6. Utilisez display: table-cell - centrage horizontal et vertical

Pour les éléments qui ne sont pas des tableaux, nous pouvons utiliser display:table-cell pour le simuler dans une cellule de tableau

.father{
    height:300px;
    background:#ccc;
    display:table-cell; /*IE8以上及Chrome、Firefox*/
    vertical-align:middle; /*IE8以上及Chrome、Firefox*/
    text-align:center;
 }
 .son{
 display:inline-block;//或是inline
 }

7. Technique bizarre - l'enfant doit être le même que le père (la largeur et la hauteur de l'élément enfant sont connues) - centrage horizontal et vertical

.father{
position:relative;
}
.son{//m、n为子盒子宽、高的一半
position:absolute;
left:50%;
top:50%;
margin-left:-mpx;
margin-top:-npx;

8 La largeur et inconnue. hauteur de l'élément enfant - centrage horizontal et vertical

.father {
    position:relative;
}
.son {
    position:absolute;
    top:50%;
    left:50%:
    transform:translate(-50%,-50%) /*单独设置transform:translateY(-50%);*/
}

9. Méthode du pseudo-élément - centrage vertical

.father{
    position: relative;
}
.father::before{
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%;
    vertical-align: middle;
}
.son{
    display: inline-block;
    vertical-align: middle;
}

Tutoriels associés recommandés : Tutoriel vidéo CSS

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!