Je rencontre souvent des étudiants qui demandent, comment créer un centre d'élément vers le haut, le bas, la gauche et la droite? Je crois que vous rencontrerez souvent ce problème lors des entretiens. Voici quelques moyens de vous renseigner. Si vous avez des lacunes, veuillez ajouter.
Description du problème:
Étant donné deux éléments, ces deux éléments ont une relation parent-enfant. Et la taille des deux éléments est incertaine, alors comment faire en sorte que l'enfant soit centré en haut, en bas, à gauche et à droite dans le parent à ce moment? (Pour le moment, définissez le parent pour qu'il soit plus grand que l'enfant)
Le premier: utilisez le positionnement,
téléchargez d'abord le code et effectuez:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Analyse d'idées:
positionnement relatif du parent, positionnement absolu de l'enfant et les valeurs des quatre attributs de positionnement sont tous mis à 0, alors si l'enfant ne définit pas la largeur et la hauteur à ce moment, il sera étiré à la même largeur et hauteur que le parent. Et maintenant, la largeur et la hauteur de l'enfant sont définies, donc la largeur et la hauteur seront affichées en fonction de nos paramètres, mais en fait, l'espace réservé virtuel de l'enfant a rempli tout le parent. À ce stade, donnez-lui une marge: auto . Centré vers le haut, le bas, la gauche et la droite
Le deuxième type, le positionnement avec déplacement css3, télécharge
toujours directement le code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
CSS rend l'élément centré de manière absolue.
Idée:
positionnement relatif du parent, positionnement absolu de l'enfant, et si les attributs supérieur et gauche sont donnés en pourcentage, alors ce pourcentage est calculé par rapport à la largeur et à la hauteur du parent. Si seules ces deux valeurs sont donné, le coin supérieur droit de l'enfant sera aligné avec le point central du parent, et l'image suivante sera obtenue:
CSS rend l'élément absolument centré. Combien de façons le savez-vous?
À ce stade, d'autres opérations sont nécessaires: l'attribut de déplacement dans css3 calcule le pourcentage en fonction de lui-même, vous n'avez donc qu'à utiliser cet attribut pour se déplacer vers le coin supérieur gauche de 50%, afin que l'enfant puisse monter, descendre , à gauche et à droite dans le parent. Centré
Le troisième type: utilisez l'affichage d'élément de bloc en ligne:
code de bloc en ligne et effet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
text-align: center;
}
.content:before{
content: '';
height:100%;
width:0;
display: inline-block;
vertical-align: middle;
}
.box{
width:100px;
height:40px;
background: #f0a238;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Par conséquent, je n'ai plus besoin de le lire, vous pouvez copier le code et l'essayer vous-même
Idée:
Tout d'abord, convertissez l'enfant en un élément de bloc en ligne, puis vous pouvez directement utiliser text-align: center pour obtenir le centrage gauche et droit, et la difficulté de cette méthode réside dans le centrage en haut et en bas. L'enfant est un élément de bloc en ligne. Bien sûr, il est impossible de dire que la définition d'une hauteur de ligne pour le parent centrera docilement l'enfant de haut en bas. Des opérations plus compliquées sont donc nécessaires:
Tout d'abord, définissez l'alignement vertical de l'enfant: vartical-align
a ces valeurs: haut, baseline, bas, milieu, etc. Je pense que la signification de ces valeurs n'a pas besoin de moi pour l'expliquer.
CSS rend l'élément centré de manière absolue.
Mais cet attribut a un inconvénient: il a besoin d'une référence, c'est-à-dire s'il y a deux éléments enfants dans le parent, et que les deux éléments enfants sont définis sur vertical-align: middle, alors l'effet est uniquement l'alignement centré entre les deux éléments. . Il ne place pas les deux éléments enfants au milieu du parent.
À ce moment, le pourboire arrive
Astuce 1: Réglez la hauteur d'un élément à 100%, puis l'autre élément sera au centre du parent de haut en bas à ce moment,
comme indiqué sur la figure:
CSS rend l'élément absolument centré. Combien de façons le savez-vous?
Mais pour le moment, il y a un élément supplémentaire qui ne répond pas aux exigences. Bien sûr, si vous avez deux éléments dans la mise en page réelle et que l'un des éléments peut être réglé à 100% de hauteur, c'est très bien.
Astuce 2: Trouvez un moyen d'éliminer un autre élément - utilisez le pseudo élément avant, veuillez consulter le code pour plus de détails.
Conseils: En fait, vous n'avez pas besoin de faire référence à l'élément pour le moment. Il est également possible de définir le niveau parent avec la même hauteur de ligne que le niveau parent, mais ce principe est trop compliqué. De plus, cette méthode ne rend pas l'élément absolument centré de haut en bas, ce qui implique la conception du texte, Il impliquera également un point clé lorsque le navigateur analyse le texte: X-line, ne pas faire une exploration en profondeur ici, vous pouvez l'essayer si tu es intéressé.
Quatrième: modèle Flexbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Je ne regarderai pas les rendus, et j’ai le sentiment qu’il n’ya rien à expliquer. Tout le mérite de css3. Il n’ya pas de compétence. Vous pouvez maîtriser cette méthode en maîtrisant le modèle flexbox. C'est simple et grossier. Jetons un coup d’œil au modèle de la flexbox, et j’écrirai quelque chose de plus spécifique à ce sujet lorsque j’aurai du temps à l’avenir si je suis de bonne humeur
CSS rend l'élément absolument centré. Combien de façons le savez-vous?
Cinquième: disposition de la grille
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: grid;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
Cette méthode est la même que le modèle flexbox, simple et grossier, il n'y a rien à dire. La grille est très puissante, vous pouvez donc savoir si vous avez le temps. Bonne chance!