web-dev-qa-db-fra.com

Aligner au centre sur une div position absolue

div#thing {
  position: absolute;
  top: 0px;
  z-index: 2;
  margin: 0 auto;
}

<div id="thing">
   <p>text text text with no fixed size, variable font</p>
</div>

La div est en haut, mais je ne peux pas le centrer avec <center> ou margin: 0 auto;

htmlcssxhtml
88
Steve

Votre problème peut être résolu si vous donnez à votre div une largeur fixe, comme suit:

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}
147
JacobE
div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}
96
Matheus Oliveira

Je sais que je suis en retard pour la fête, mais je pensais pouvoir donner une réponse ici aux personnes qui doivent positionner horizontalement un élément absolu, lorsque vous ne connaissez pas sa largeur exacte.

Essaye ça:

// Horizontal example.
div#thing {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

La même technique peut également être appliquée pour les cas où vous aurez besoin d'un alignement vertical, en ajustant simplement les propriétés comme suit:

// Vertical example.
div#thing {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
32
Michael Giovanni Pumo

Pour centrer verticalement et horizontalement, procédez comme suit:

div#thing {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
1
Armin

S'il est nécessaire d'avoir une largeur relative (en pourcentage), vous pouvez envelopper votre div dans une position absolue:

div#wrapper {
    position: absolute;
    width: 100%;
    text-align: center;
}

N'oubliez pas que pour positionner un élément de manière absolue, l'élément parent doit être positionné relativement.

0
dalvallana

J'avais le même problème et ma limite était que je ne pouvais pas avoir une largeur prédéfinie. Si votre élément n'a pas de largeur fixe, essayez ceci.

div#thing 
{ 
  position: absolute; 
  top: 0px; 
  z-index: 2; 
  left:0;
  right:0;
 }

div#thing-body
{
  text-align:center;
}

puis modifiez votre code HTML pour qu'il ressemble à ceci

<div id="thing">
 <div id="thing-child">
  <p>text text text with no fixed size, variable font</p>
 </div>
</div>
0
Usman Shaukat