Édition de la composition | Song Dashi
Fonctionnement de la plate-forme |
UNE description du problème
Marc le 6 mai 2023, je ne t'ai pas vu depuis longtemps.
Ce que je veux partager avec vous aujourd'hui, c'est comment réaliser le centrage vertical et horizontal des éléments.
Récemment, j'ai trié de vraies questions d'entretien sur CSS, mais à cause des vacances du 1er mai, les progrès ont été retardés. Aujourd'hui, je voudrais partager l'un des résultats de la collation, à propos de la mise en œuvre du centrage vertical et horizontal des éléments couramment utilisés dans les projets.
Exigences spécifiques : répertorier par classification d'éléments, séparer les méthodes de mise en œuvre couramment utilisées et celles qui ne sont pas couramment utilisées, et essayer d'être aussi complet que possible.
Questions spécifiques : 1. Quelles sont les classifications des éléments ; 2. Comment mettre en œuvre chaque élément, et quelles méthodes de mise en œuvre sont les plus couramment utilisées et les meilleures.
Aujourd'hui, dans cet article, nous utilisons le langage le plus concis pour bien comprendre les problèmes ci-dessus.
DEUX résolution de problèmes
1. Présentation des codes
Le code pour le centrage vertical et horizontal des meilleurs éléments est le suivant, copiez et utilisez directement !
【最好用的垂直居中方式】
1、两行代码实现。将父元素设置为 Flex 布局，再给要居中的子元素添加margin：auto。
2、对于 行元素、行块元素、块元素 都适用。
<body>
<div class="fatherDiv">
<div class="sonDiv">哈哈哈哈</span>
</div>
</body>
<style>
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
}
/* 子元素 */
.sonDiv {
background-color: pink;
margin: auto;
}
</style>
2. Analyse du problème
1. Q : Quelles sont les classifications des éléments ?
répondre:
Les éléments de bloc, display: block; , occupent une ligne par eux-mêmes et peuvent définir la largeur et la hauteur ;
Les éléments de bloc de ligne, display: inline-block; , sont affichés sur la même ligne, et la largeur et la hauteur peuvent être définies ;
Les éléments de ligne, display: inline; , sont affichés sur la même ligne, et la largeur et la hauteur ne peuvent pas être définies.
2. Question : Comment mettre en œuvre chaque élément, et quelles méthodes de mise en œuvre sont les plus couramment utilisées et les meilleures ?
répondre:
élément de ligne :
1、text-align + line-height
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
2、affichage : tableau-cellule ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline;
}
3. écran : flexible ; [facile à utiliser]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
4. écran : flexible ; [facile à utiliser]
/* élément père */
.fatherDiv { largeur : 500px ; hauteur : 500px ; couleur d'arrière-plan : vert ; affichage : flexible ; } /* élément enfant */ .sonDiv { largeur : 200px ; affichage : en ligne ;
margin: auto;
}
5、position : absolue ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position : absolue ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7. position : absolue ; [facile à utiliser]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、affichage : grille ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
margin: auto;
}
9、affichage : grille ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline;
}
Élément de bloc de ligne :
1、text-align + line-height + vertical-align
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
text-align: center;
line-height: 500px;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
vertical-align: middle;
}
2、affichage : tableau-cellule ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
text-align: center;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
background-color: pink;
display: inline-block;
}3. écran : flexible ; [facile à utiliser]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
4. écran : flexible ; [facile à utiliser]
/* 父元素 */ .fatherDiv { width: 500px; height: 500px; background-color: green; display: flex; } /* 子元素 */ .sonDiv { width: 200px; height: 200px; background-color: pink; display: inline-block;margin: auto; }
5、position : absolue ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
6、position : absolue ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
7. position : absolue ; [facile à utiliser]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
8、affichage : grille ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
margin: auto;
}
9、affichage : grille ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: inline-block;
}
élément de bloc :
1、affichage : tableau-cellule ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: table-cell;
vertical-align: middle;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
2. écran : flexible ; [facile à utiliser]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
3. écran : flexible ; [facile à utiliser]
/* 父元素 */ .fatherDiv { width: 500px; height: 500px; background-color: green; display: flex; } /* 子元素 */ .sonDiv { width: 200px; height: 200px; background-color: pink; display: block;margin: auto; }
4、position : absolue ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
5、position : absolue ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
6. position : absolue ; [facile à utiliser]
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
position: relative;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
7、affichage : grille ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
margin: auto;
}
8、affichage : grille ;
/* 父元素 */
.fatherDiv {
width: 500px;
height: 500px;
background-color: green;
display: grid;
justify-content: center;
align-items: center;
}
/* 子元素 */
.sonDiv {
width: 200px;
height: 200px;
background-color: pink;
display: block;
}
- FIN -