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

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>

CSS:

.box1{
    display: table-cell;
    vertical-align: middle;
    text-align: center;        
}

Methode 2: Anzeige :flex

.box2{
    display: flex;
    justify-content:center;
    align-items:Center;
}

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

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

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

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:'';
  width:0;
  height:100%;
  display:inline-block;
  vertical-align:middle;
}

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

Methode 8: display:-webkit-box

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

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

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!