Drei Möglichkeiten, Text mit variabler Breite und Höhe in Divs vertikal zu zentrieren

Während eines Interviews wurde ich gefragt: Wie zentriert man einen Text mit variabler Breite und Höhe vertikal?

Jetzt zusammenfassen:

Schreiben Sie die Struktur in den Körper

main">
< id="login">
djshdk awjdsd sede sfcdf vdj sh dkaw jds dse desf cdf vd jsh dkawjd sds ede sfcdfv vd jsh dkawjd sds ede sfcdfv.

Methode 1:

#main{
position: relative; // Relative Positionierung im übergeordneten Element verwenden
width : 200px;
Höhe: 200px;
Überlauf: versteckt;
Hintergrundfarbe: #ff0;
padding: 10px;
}
#login{
position: absolute; /*Verwenden Sie absolute Positionierung*/
top in untergeordneten Elementen :50%; /*Der Abstand ist 50% höher als das übergeordnete Element*/

links:50%;

Hintergrundfarbe: #eee ;
-webkit-transform:translate(-50%,-50%); /*CSS3-Stil, :translate(-50%,-50%) ist relativ zu -50 % seines Abstands von der x-Achse und der y-Achse -axis */
}

Methode 2:

#main{
width: 200px;
height: 200px;
background-color: #eee;
display: table; /* Das Beschriftungselement soll in der Form table*/
}
#login{
display: table dargestellt werden -cell; /* Weder ie7 noch ie6 erkennen display: table-cell;*/
vertical-align: middle;
}

Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, Text mit variabler Breite und Höhe in Divs vertikal zu zentrieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!