Lors d'une récente interview, l'intervieweur a posé des questions sur la méthode de mise en page de centrage horizontal et vertical de CSS. En tant que débutant en front-end, j'ai sans aucun doute été confus. quand j'étais libre. Laissez-moi l'analyser et le partager avec vous pour éviter de tomber dans des pièges.
Tout d’abord, expliquons le HTML et quelques styles CSS de base, je n’entrerai pas dans les détails ci-dessous !
html
<body> <div class="div1"> <div class="box size">垂直水平居中</div> </div> </body>
Le code CSS public est le suivant
<style type="text/css">
/* 公共样式 */
.div1{
width: 300px;
height: 300px;
border:1px solid aqua;
}
.box{
background: #00FFFF;
}
.box.size{
width:100px;
height:100px;
}
</style>Ces styles CSS seront inclus par défaut dans l'introduction suivante et ne sera plus décrit !
1. absolu et marge automatique (couramment utilisé)
De même, la largeur et la hauteur de l'élément centré doivent être fixes, et le la largeur et la hauteur des éléments enfants doivent être connues
De cette façon, en réglant la distance dans toutes les directions à 0, puis en réglant la marge sur auto, vous pouvez la centrer dans toutes les directions
.div1{
position: relative;
}
.box{
position: absolute;
top:0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}2. absolu et marge (valeur négative)
Laissez-moi vous expliquer brièvement le principe Le positionnement absolu est utilisé Le pourcentage de positionnement absolu est relatif à la largeur et. hauteur de l'élément parent, nous pouvons donc centrer l'élément sur la base de ce principe. Mais attention : le positionnement absolu est basé sur le coin supérieur gauche de l'élément enfant, mais si vous souhaitez que l'élément enfant soit affiché au centre, vous devez résoudre ce problème.
À ce stade, vous pouvez utiliser la valeur négative de la marge pour obtenir l'effet. Lorsque la marge est négative, l'élément est positionné dans la direction opposée. De cette façon, nous pouvons définir la marge du sous-élément. la moitié de la largeur et de la hauteur du sous-élément. (PS : L'inconvénient est que vous devez obtenir la largeur et la hauteur des éléments enfants)
.div1{
position: relative;
}
.box{
top: 50%;
left: 50%;
position: absolute;
margin-top: -50px;
margin-left: -50px;
}Absolu et calc
également. besoin de la largeur et de la hauteur des éléments enfants Fixe, et connaissant la largeur et la hauteur, css3 a des propriétés calculées.
Le pourcentage du haut est basé sur le coin supérieur gauche de l'élément moins la moitié de la largeur (PS : repose sur la compatibilité calc)
.div1{
position: relative;
}
.box{
position: absolute;
top: calc(50% - 50px );
/* 减号前后没有空格，该样式不生效*/
left: calc(50% - 50px );
}Quand j'écrivais ce code, j'ai découvert une chose intéressante, calc (50%-50px) S'il n'y a pas d'espaces avant et après le signe moins, le style ne prendra pas effet. Si vous écrivez des espaces, il prendra effet normalement, je ne connais pas la raison précise emmmmm
<. 🎜>ci-dessous La méthode peut définir
html sans connaître la largeur et la hauteur des éléments enfants. Modifiez-le en :<body> <div class="div1"> <div class="box">水平垂直居中，不需要子元素固定宽高</div> </div> </body>
Le css public est le même. suit
.div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box{
background: #00FFFF;
}4. Flex (couramment utilisé)
flex est une solution de mise en page moderne qui ne nécessite que quelques lignes de code. pour obtenir l'effet de centrage.div1{
display: flex;
justify-content: center;
align-items: center;
} 5. line-height
En utilisant l'attribut de centrage des éléments en ligne, vous pouvez également obtenir un effet horizontal et vertical. centrage. Définissez la boîte comme un élément en ligne et utilisez text-align pour obtenir un centrage horizontal ou un alignement vertical (PS : cette méthode nécessite de réinitialiser l'affichage du texte à l'effet souhaité dans l'élément enfant) .div1{
line-height: 300px;
text-align: center;
font-size: 0px;
}
.box{
font-size: 10px;
display: inline-block;
vertical-align: middle;
line-height:initial;
/* 修正文字 */
text-align: left;
}6. Absolu et transformation
Ne nécessite pas de largeur et de hauteur fixes des éléments enfants, mais dépend de la compatibilité de translate2d .div1{
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}7. css-table
Le nouvel attribut de table en CSS peut changer l'effet d'affichage des éléments ordinaires en éléments de tableau, et peut également obtenir un centrage horizontal .div1{
display:table-cell;
text-align: center;
vertical-align: middle;
}
.box{
display:inline-block;
}Sentiment personnel : Je préfère absolute +margin auto, flex, Absolute et transform Il est préférable d'utiliser flex sur le terminal mobile. J'aime la +margin absolue. sur le terminal PC auto
Tutoriels associés recommandés :Tutoriel vidéo CSS, Tutoriel vidéo CSS3
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
