Trois façons de centrer verticalement du texte avec une largeur et une hauteur variables en divs

On m'a demandé lors d'un entretien : Comment centrer verticalement un texte à largeur et hauteur variables ?

Maintenant, pour résumer :

Écrivez la structure dans le corps

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

Méthode 1 :

#main{

position: relative; //Utiliser le positionnement relatif dans l'élément parent
width : 200px;
hauteur: 200px;
débordement: caché;
couleur de fond: #ff0;
padding : 10px;}
#login{
position : absolue ; /*Utiliser le
positionnement absolu*/
top dans les éléments enfants :50%; /*La distance est 50% supérieure à l'élément parent*/

left:50%;

background-color: #eee ;

-webkit-transform:translate(-50%,-50%); /*Style CSS3, :translate(-50%,-50%) est relatif à -50% de sa distance par rapport à l'axe x et y -axis */
}

Méthode 2 :

#main{

largeur : 200px;
hauteur : 200px;
couleur de fond : #eee;

display: table; /* Que l'élément label soit présenté sous la forme de table*/}
#login{
display: table -cell; /* Ni ie7 ni ie6 ne reconnaissent display: table-cell;*/

vertical-align: middle;}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn