web-dev-qa-db-fra.com

Comment centrer un élément enfant en CSS, même s'il est plus grand que le parent?

Je voudrais créer une classe CSS pour qu'une div puisse être placée 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 parent 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, son centre n'est pas placé au centre de son parent. Au lieu de cela, leurs bordures de gauche seront au même endroit et l'élément enfant sera étendu uniquement à droite:

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?

htmlcsscss3
22
Iter Ator

Voici une solution sans utiliser les 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>

14
Nenad Vracar

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);
}

Démo

16
Ismail Farooq

Ok j'ai essayé sans 2D CSS:

Remplacez absolute par fixed et ajoutez du margin: auto;

JSfiddle ici

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>

4
Relisora

Tu y es presque. Il suffit de définir les positions absolues sur le même nombre (grand) négatif, afin de laisser assez de place pour la marge auto:

.centered {
    position: absolute;
    margin: auto;

    bottom: -9999px;
    left: -9999px;
    top: -9999px;
    right: -9999px;
}

https://jsfiddle.net/797L7nce/9/

3
Sphinxxx

Si vous connaissez les dimensions des éléments, vous pouvez utiliser la position gauche/supérieure à 50% avec des marges négatives correspondant à 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;
}
3
Variant

Ajouter le CSS ci-dessous à .d2 résoudra le problème.

.d2 {
    background: red;
    opacity: 0.7;
    width: 250px;
    height: 250px;
    position:absolute;
    left:50%;
    margin-left:-125px;
}

Vous pouvez consulter la démo ici

2
Kan412

Dans Bootstrap 4:

pour centrer l'enfant horizontalement, utilisez la classe bootstrap-4:

justify-content-center

pour centrer l'enfant verticalement, utilisez la classe bootstrap-4:

 align-items-center

mais souvenez-vous de ne pas oublier d'utiliser la classe d-flex avec celle-ci c'est une classe utilitaire bootstrap-4, comme si

<div class="d-flex justify-content-center align-items-center" style="height:100px;">
    <span class="bg-primary">MIDDLE</span>    
</div>

Note: assurez-vous d'ajouter des utilitaires bootstrap-4 si ce code ne fonctionne pas

Je sais que ce n'est pas la réponse directe à cette question mais cela peut aider quelqu'un

0
user9299363