So legen Sie die CSS-Mittelausrichtung fest

Css-Zentrierungseinstellungsmethode: 1. Horizontale Zentrierung [text-align:center]; 2. Horizontale Zentrierung [margin: 0 auto] 4. Verwenden Sie Tabellen, horizontal und vertikal zentriert 5. Flexibles Layout, horizontale und vertikale Zentrierung.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

Einstellungsmethode für die CSS-Mittelausrichtung:

1. text-align:center – horizontale Zentrierung

gilt nur für Inline-Elemente wie Text, Bilder, Schaltflächen usw. (Anzeige ist auf Inline oder Inline-Block eingestellt , etc.) für horizontale Ausrichtung

2, Rand: 0 automatisch; —— Horizontale Zentrierung

Nur horizontale Zentrierung und ist ungültig für die Positionierung schwebender Elemente

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

3. height=height, nur für eine Textzeile Effektiv

4. Tabelle verwenden – horizontale und vertikale Zentrierung

Die beiden Attribute align='center' und valign='middle' von td/th können horizontal und vertikal zentriert werden

5. Flexibles Layout – horizontale und vertikale Zentrierung Zelle

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

7. Seltsame Techniken – Das Kind muss mit dem Vater identisch sein (die Breite und Höhe des untergeordneten Elements sind bekannt) – Horizontale und vertikale Zentrierung

.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
 }

8. Unbekannte Breite und Höhe des untergeordneten Elements Zentrierung

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

9. Pseudoelement-Methode – Vertikale Zentrierung

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

Verwandte Tutorial-Empfehlungen:

CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo legen Sie die CSS-Mittelausrichtung fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!