Fassen Sie die neuen Funktionen von CSS3 zusammen, um die Implementierungsmethoden der vertikalen Zentrierung zusammenzufassen.

Funktionen wie Flex-Layout und Vor-Pseudo-Elemente in CSS3 sind wirklich praktisch und elegant, um die vertikale Zentrierung zu implementieren. Hier fassen wir die neuen Funktionen von CSS3 zusammen und fassen die Implementierungsmethoden der vertikalen Zentrierung zusammen:

0. Zentrierung einzeiliger Inhalte
Es ist am einfachsten, nur eine einzelne Zeile zu berücksichtigen. Unabhängig davon, ob der Container eine feste Höhe hat, stellen Sie einfach die Zeilenhöhe und die Höhe des Containers ein Werte gleich, und addieren Sie einfach over-flow: versteckt

.middle-demo-1{   
height: 4em;   
line-height: 4em;   
overflow: hidden;   
}

Vorteile:
(1) Unterstützt sowohl Blockebene- als auch Inline-Elemente
(2). alle Browser
Nachteile:
(1) Es kann nur eine Zeile angezeigt werden
(2). IE unterstützt keine zentrierten
wie <img> > (1). Verwenden Sie die relative Höhendefinition. Ihre Höhe und Zeilenhöhe
(2). Wenn Sie Ihr Layout nicht ruinieren möchten, muss overflow: versteckt sein
warum?
Bitte vergleichen Sie die folgenden beiden Beispiele:

<p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<br/>
<br/>
<p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Die vorherige Höhe verwendet die absolute Einheit px, und es gibt keinen versteckten Überlauf. Die für die nächste verwendete Einheit height ist. Relative Einheiten sind em, und der Überlauf ist ausgeblendet. Wenn Ihr Browser das Vergrößern von Schriftarten unterstützt, sehen Sie, was passiert.

1. Verwenden Sie position:absolute (fest), um die Eigenschaften von left, top, margin-left und margin-top festzulegen; >2. Verwenden Sie das Attribut „position:fixed“ (absolut)

.box{   
    position:absolute;/*或fixed*/
    top:50%;   
    left:50%;   
    margin-top:-100px;   
    margin-left:-200px;   
}

3. Zellattribut. Der Inhalt ist vertikal zentriert;

.box{   
    position: absolute;或fixed
    top:0;   
    rightright:0;   
    bottombottom:0;   
    left:0;   
    margin: auto;   
}

4. Attribut von CSS3;

.box{   

display:table-cell;   

vertical-align:middle;   

text-align:center;   

width:120px;   

height:120px;   

background:purple;   

}

5 🎜>

.box{   
    position: absolute;   
    transform: translate(50%,50%);   
    -webkit-transform:translate(50%,50%);   
    -moz-transform:translate(50%,50%);   
    -ms-transform:translate(50%,50%);   
}

6.Flex-Layout;

.box{   

position:fixed;   

display:block;   

background:rgba(0,0,0,.5);   

}   

.box:before{   

content:'';   

display:inline-block;   

vertical-align:middle;   

height:100%;   

}   

.box.content{   

width:60px;   

height:60px;   

line-height:60px;   

color:red;

Das obige ist der detaillierte Inhalt vonFassen Sie die neuen Funktionen von CSS3 zusammen, um die Implementierungsmethoden der vertikalen Zentrierung zusammenzufassen.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!