Welche Methoden gibt es für die vertikale Zentrierung in CSS?

Methode: 1. Verwenden Sie den Stil „display:table-cell;vertikal-align:middle;“ 3. Verwenden Sie absolute Positionierung und Transformationsattribute; Verwenden Sie absolute Positionierung und Attribute wie oben und links.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Die vertikale Zentrierung ist einer der häufigsten Effekte im Layout. Um eine gute Kompatibilität zu erreichen, erfolgt die vertikale Zentrierung auf der PC-Seite im Allgemeinen durch absolute Positionierung, Tabellenzellen, negative Ränder und andere Methoden. 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 Marge

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

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWelche Methoden gibt es für die vertikale Zentrierung in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!