Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Teilen Sie neun reine CSS-Methoden, um eine vertikale Zentrierung zu erreichen

yulia
Freigeben: 2018-09-21 15:16:31
Original
1824 Leute haben es durchsucht

Dieser Artikel konzentriert sich auf die vertikale Zentrierung und stellt hauptsächlich verschiedene Methoden der vertikalen Zentrierung vor.

Vertikale Zentrierung ist einer der häufigsten Effekte im Layout. Um eine gute Kompatibilität zu erreichen, erfolgt die vertikale Zentrierung auf dem PC im Allgemeinen durch absolute Positionierung, Tabellenzelle, negative Ränder usw . . Mit CSS3 ist die vertikale Zentrierung für mobile Endgeräte vielfältiger.

Methode 1: Tabellenzelle

HTML-Struktur:

<div class="box box1">
        <span>垂直居中</span>
</div>
Nach dem Login kopieren

CSS:

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}
Nach dem Login kopieren

Methode 2: Anzeige :flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}
Nach dem Login kopieren

Methode 3: Absolute Positionierung und negative Margen

.box3{position:relative;}
.box3 span{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }
Nach dem Login kopieren

Methode 4: Absolute Positionierung und 0

.box4 span{
  width: 50%; 
  height: 50%; 
  background: #000;
  overflow: auto; 
  margin: auto; 
  position: absolute; 
  top: 0; left: 0; bottom: 0; right: 0; 
}
Nach dem Login kopieren

Diese Methode ähnelt in gewisser Weise der oben genannten, aber hier wird die Zentrierung erreicht, indem margin:auto und oben, links, rechts und unten auf 0 gesetzt werden. Es ist erstaunlich. Allerdings müssen Sie hier die Höhe der internen Elemente bestimmen. Sie können Prozentsätze verwenden, was für mobile Endgeräte besser geeignet ist.

Methode 5: Übersetzen

.box6 span{
            position: absolute;
            top:50%;
            left:50%;
            width:100%;
            transform:translate(-50%,-50%);
            text-align: center;
        }
Nach dem Login kopieren

Dies ist eigentlich eine Variation von Methode 3, und die Verschiebung wird durch Übersetzen erreicht.

Methode 6: display:inline-block

.box7{
  text-align:center;
  font-size:0;
}
.box7 span{
  vertical-align:middle;
  display:inline-block;
  font-size:16px;
}
.box7:after{
  content:&#39;&#39;;
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
Nach dem Login kopieren

Diese Methode ist wirklich clever ... Verwenden Sie :after, um den Platz zu belegen.

Methode 7: display:flex and margin:auto

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}
Nach dem Login kopieren

Methode 8: display:-webkit-box

.box9{
    display: -webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    -webkit-box-orient: vertical;
    text-align: center
}
Nach dem Login kopieren

CSS3 ist breit gefächert und tiefgreifend und kann viele kreative Effekte erzielen, daher muss es sorgfältig studiert werden.

Methode 9: display:-webkit-box

Fügen Sie bei dieser Methode ein div außerhalb des Inhaltselements ein. Legen Sie diese Div-Höhe fest: 50 %; margin-bottom: -contentheight;.

Inhalt löscht den Float und zeigt ihn in der Mitte an.

<div class="floater"></div>  
<div class="content"> Content here </div>  
.floater {
    float:left; 
    height:50%; 
    margin-bottom:-120px;
}
.content {
    clear:both; 
    height:240px; 
    position:relative;
}
Nach dem Login kopieren

Vorteile:

Gilt für alle Browser

Wenn nicht genügend Platz vorhanden ist (zum Beispiel: Das Fenster ist verkleinert), wird der Inhalt nicht abgeschnitten und die Bildlaufleiste angezeigt wird erscheinen

Nachteile:

Das Einzige, was mir einfällt, ist die Notwendigkeit zusätzlicher leerer Elemente (nicht so schlimm, anderes Thema)

Das obige ist der detaillierte Inhalt vonTeilen Sie neun reine CSS-Methoden, um eine vertikale Zentrierung zu erreichen. 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