Centrer un élément avec position: relative

Question

J'ai un menu qui apparaît au survol d'une

positionnée absolument. Tous les éléments du menu doivent être positionnés relativement car la

absolue apparaîtra plusieurs fois sur une page et apparaîtra dans plusieurs tailles dans une seule instance.

Comment puis-je centrer plusieurs éléments avec position: relative à la fois verticalement et horizontalement lorsque je ne connaîtrai pas la taille de la

parente?

Je connais l'astuce de position: absolute avec des marges négatives, mais cette situation nécessite quelque chose de différent.

Voici le code:

.OuterCase { 
  position  : absolute; 
  width     : 100%;  
  height    : 100%; 
  text-align: center;
}

.InnerItem  { 
   width  : 38px;
   height : 38px;
   display: inline-block;
}

J'ai réussi à centrer les éléments horizontalement; c'est la verticalité qui se révèle un peu insaisissable.

Answer 1

.parent {
    width: 100%;
    height: 30vh;    
    display: flex;
    justify-content: center;
    align-items: center;
}
.child {
    position: relative;
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

Assurez-vous simplement que la hauteur du parent est supérieure à la hauteur de l'enfant.

Answer 2

Une autre solution simple que je n'ai pas encore vue ici :

.parent{
    display: flex;
    flex-direction: column;
    height: 40vh;
    width: 40vw;
}

.child{
    margin:auto;
}