Comment définir l'alignement central en CSS

Comment définir l'alignement central en CSS : 1. Centrage horizontal via "text-align:center" ou "margin:vertical auto;" 2. Centrage vertical via "line-height" ; "Layout" réalise le centrage horizontal et vertical, etc.

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

css - méthode d'alignement central

• text-align:center — — Le centrage horizontal

n'est valable que pour les éléments en ligne tels que le texte, les images, les boutons, etc. (l'affichage est défini sur inline ou inline-block, etc.) Centrage horizontal

• marge : vertical automatique ; ——Centrage horizontal

Centrage horizontal uniquement, et invalide 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;
        }

• line-height —— Centrage vertical

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

• Utiliser le tableau— —Centrage horizontal et vertical

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

• Mise en page flexible - horizontal, centrage vertical

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

• Utiliser l'affichage : tableau-cellule - Centrage horizontal et vertical

Pour ceux qui ne sont pas des éléments de 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 }

• Astuce étrange - 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;

• Largeur et hauteur de l'élément enfant inconnues——Centrage horizontal et vertical
  

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

• Méthode des pseudo-éléments - 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;
        }

Pour du HTML/css plus détaillé connaissances, veuillez visiter le tutoriel vidéo CSScolonne !

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!