Comment centrer un élément enfant dans CSS, même s'il est plus grand que le parent?
Je voudrais créer une classe CSS afin qu'un div puisse être placé au centre de son parent. Le code que j'utilise est:
.centered {
position: absolute;
margin: auto;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
Cela fonctionne si le père est plus grand que l'élément enfant, ou a la même taille: https://jsfiddle.net/cy8dn1km/
Mais si l'enfant est plus grand, alors son centre n'est pas positionné au centre de son parent. Au lieu de cela, leurs frontières de gauche seront au même endroit, et l'élément enfant sera étendu uniquement à droit:
Https://jsfiddle.net/797L7nce/
Quelque chose ne va pas avec le centrage horizontal.
Comment est-il possible de le réparer en utilisant uniquement CSS (sans utiliser de transformations CSS 2D / 3D ), sans ajouter de nouveaux éléments de conteneur?
7 réponses
Voici une solution sans utiliser de transformations CSS 2D / 3D. Vous pouvez utiliser display: flex avec flex-direction: column (c'est - important) sur l'élément parent et display: table sur l'élément enfant.
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: green;
}
.centered.d1 {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
display: table;
}<div class="centered d1">
<div class="centered d2"></div>
</div>Ajouter left: 50%; transform: translate(-50%, 0);et supprimer right: 0px;
.centered {
position: absolute;
margin: auto;
display: block;
bottom: 0px;
top: 0px;
left: 50%;
transform: translate(-50%, 0);
}
Ok j'ai essayé sans CSS 2D :
Changez absolute en fixed et ajoutez margin: auto;
body, html {
width: 100%;
height: 100%;
}
body {
position: relative;
background: green;
}
.centered {
position: fixed;
margin: auto;
display: block;
bottom: 0px;
left: 0px;
top: 0px;
right: 0px;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
}<div class="centered d1">
<div class="centered d2">
</div>
</div>Si vous connaissez les dimensions des éléments, vous pouvez utiliser la position gauche/supérieure à 50% avec des marges négatives de la moitié de la taille de l'élément.
J'ai mis à jour votre violon ici: https://jsfiddle.net/797L7nce/2/
.centered {
position: absolute;
display: block;
left:50%;
top:50%;
}
.d1 {
background: yellow;
width: 50px;
height: 50px;
margin-left:-25px;
margin-top:-25px;
}
.d2 {
background: red;
opacity: 0.7;
width: 250px;
height: 250px;
margin-left:-125px;
margin-top:-125px;
}
Tu y es presque. Il suffit de définir les positions absolues sur le même nombre négatif (grand), pour faire assez de place pour la marge auto:
.centered {
position: absolute;
margin: auto;
bottom: -9999px;
left: -9999px;
top: -9999px;
right: -9999px;
}
Dans Bootstrap 4:
À centrez l'enfant horizontalement, utiliser la classe bootstrap-4:
justify-content-center
À centrez l'enfant verticalement, utiliser la classe bootstrap-4:
align-items-center
Mais n'oubliez pas n'oubliez pas d'utiliser d-flex classe avec ces c'est une classe utilitaire bootstrap-4, comme ceci
<div class="d-flex justify-content-center align-items-center" style="height:100px;">
<span class="bg-primary">MIDDLE</span>
</div>
Remarque: assurez-vous d'ajouter bootstrap-4 utilitaires si ce code ne fonctionne pas
Je sais que ce n'est pas le réponse directe à cette question mais cela peut aider quelqu'un