Heim > Web-Frontend > CSS-Tutorial > So legen Sie die CSS-Mittelausrichtung fest

So legen Sie die CSS-Mittelausrichtung fest

coldplay.xixi
Freigeben: 2023-01-03 09:29:37
Original
18340 Leute haben es durchsucht

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.

So legen Sie die CSS-Mittelausrichtung fest

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;
        }
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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
 }
Nach dem Login kopieren

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;
Nach dem Login kopieren

9. Pseudoelement-Methode – Vertikale Zentrierung

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage