L'alignement central des divs est l'un des aspects les plus importants du développement front-end. Dans cet article, nous examinerons la technique consistant à placer un div dans un autre div en utilisant HTML et CSS.
Dans ce tutoriel, nous aurons un div parent qui devrait avoir des div enfants. Notre tâche est de positionner le div enfant au centre du div parent.
Ce n'est pas une façon très populaire d'aligner un div sur un autre div
left:50%; top:50%; Transform: translate(-50%, -50%);
La syntaxe ci-dessus fait ce qui suit -
La règle CSS "left:50%;" fixe la position horizontale d'un élément à 50% du côté gauche de son conteneur.
La règle "top:50%;" fixe la position verticale d'un élément à 50% du haut de son conteneur.
La règle "transform: translation(-50%, -50%);" déplace l'élément de -50% horizontalement et de -50% verticalement, positionnant efficacement le centre de l'élément à 50% de la gauche et du haut de son conteneur. .
Cependant, ce n'est pas une manière courante de centrer un div dans un autre div. C'est pour les raisons suivantes -
Cela nécessite cinq lignes de code supplémentaires, plus que les autres méthodes.
Les positions des divs parents et enfants doivent être définies, ce qui peut entraîner des désagréments lors de la conception d'autres divs associés à l'avenir.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
background-color: red;
width:50vw;
height:50vh;
position: relative;
}
.child{
background-color: yellow;
Width: 25vw;
Height: 25vh;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
Dans l'exemple ci-dessus, nous déclarons d'abord que la position de l'enfant est absolue et celle du parent est relative. Ensuite, nous déplaçons l'enfant de 50 % en haut et à gauche du div parent. Ensuite, nous utilisons la propriété CSS transform pour centrer le div enfant.
translate(x, y) prend deux valeurs comme paramètres, où x est le nombre de pixels pour déplacer l'élément horizontalement et y est le nombre de pixels pour déplacer l'élément verticalement. Dans cet exemple, l'élément se déplacera de -50% de sa largeur et de -50% de sa hauteur, en le centrant verticalement et horizontalement.
La méthode la plus populaire pour centrer un div consiste à utiliser la propriété de grille de CSS. Toutefois, pour cela, vous devez d'abord déclarer le div sous forme de grille.
place-items: center;
place-items aligne les éléments horizontalement et verticalement avec le conteneur de grille. Nous ne pouvons utiliser cette propriété qu'avec des conteneurs de grille.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
background-color: blue;
width:50vw;
height:50vh;
display: grid;
place-items: center;
}
.child{
background-color: yellow;
width:25vw;
height:25vh;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
Une autre méthode que nous pouvons utiliser est la propriété flexbox de CSS. Nous devons d'abord déclarer le parent comme flexbox. Flex box est un élément largement utilisé en CSS. Ils sont très pratiques à utiliser car ce sont des éléments réactifs et les programmeurs ont généralement un bon contrôle sur les propriétés de Flexbox.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container{
background-color: purple;
width:50vw;
height:30vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.child{
background-color: green;
width:25vw;
height:10vh;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
</div>
</div>
</body>
</html>
Mettre plusieurs divs imbriqués dans un div parent est également une tâche simple. Supposons qu'il y ait trois div, à savoir le conteneur, qui est le div parent, et le premier enfant, qui est le div enfant du conteneur, le deuxième enfant est l'enfant du premier enfant. Nous pouvons ensuite d’abord centrer le premier élément enfant dans le conteneur div en utilisant la méthode dont nous avons parlé. Ensuite, nous pouvons faire du premier enfant le parent du deuxième enfant et appliquer la même technique.
À titre d'illustration, nous utiliserons l'une de ces méthodes pour démontrer la technique. Les lecteurs devraient essayer les deux autres méthodes pour effectuer des tâches similaires.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
background-color: red;
width: 50vw;
height: 30vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.first-child {
background-color: green;
width: 25vw;
height: 20vh;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.second-child {
background-color: yellow;
height: 10vh;
width: 20vw;
}
</style>
</head>
<body>
<div class="container">
<div class="first-child">
<div class="second-child"></div>
</div>
</div>
</body>
</html>
Dans cet article, nous avons appris comment centrer un div dans un autre div en utilisant HTML et CSS. Nous avons examiné trois techniques différentes pour aligner les divs au centre. Ils utilisent la propriété position, la propriété grid et la propriété flexbox. Parmi eux, l’attribut flexbox est le plus utilisé et le plus pratique.
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)
