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

Beaucoup plus simple :

position: relative; 
left: 50%;
transform: translateX(-50%);

Vous êtes maintenant centré dans votre élément parent. Vous pouvez également le faire verticalement.

Answer 2

Vous pouvez également utiliser le Modèle de boîte flexible CSS3. C'est une excellente façon de créer des mises en page flexibles qui peuvent également être appliquées pour centrer le contenu comme ceci :

#parent {
    -webkit-box-align:center;
    -webkit-box-pack:center;
    display:-webkit-box;
}

Answer 3

Si vous avez une division positionnée relativement (ou autrement), vous pouvez centrer quelque chose à l'intérieur avec margin:auto

Le centrage vertical est un peu plus complexe, mais possible.

Answer 4

Vous pouvez utiliser calc pour positionner un élément par rapport au centre. Par exemple, si vous voulez positionner un élément 200px à droite du centre .. vous pouvez faire ceci :

#votre_element{
    position:absolute;
    left: calc(50% + 200px);
}

N'oubliez pas ceci

Lorsque vous utilisez les signes + et -, vous devez avoir un espace vide entre le signe et le numéro, mais lorsque vous utilisez les signes * et /, il n'est pas nécessaire d'avoir un espace vide.

Answer 5

Une autre option est de créer un wrapper supplémentaire pour centrer l'élément verticalement.

#container{
  border:solid 1px #33aaff;
  width:200px;
  height:200px;
}

#helper{
  position:relative;
  height:50px;
  top:50%;
  border:dotted 1px #ff55aa;
}

#centered{
  position:relative;
  height:50px;
  top:-50%;
  border:solid 1px #ff55aa;
}