Centrer sur une division parfaitement positionnée


93
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>

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

Réponses:


152

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

div#thing {
    position: absolute;
    top: 0px;
    z-index: 2;
    width:400px;
    margin-left:-200px;
    left:50%;
}

1
Je ne sais pas pourquoi je n'ai pas pensé à ça, même si nous utilisons la même technique pour le centrage vertical tout le temps ... Merci quand même, vous m'avez fait gagner beaucoup de temps.
Aayush

1
que faire si l'utilisateur a fait défiler verticalement le div apparaît en haut de la page alors qu'il devrait apparaître dans la zone visible
PUG

J'affiche des vignettes d'images reszied dynamiquement dans mon div de superposition, donc je ne connais pas la largeur.
PUG

4
ce n'est qu'une solution de contournement, stackoverflow.com/questions/1776915/… semble être la solution
PUG

1
Ce n'est pas la bonne réponse. Un autre type de média ne prend pas en charge cet extrait de code.
Sushan

97
div#thing
{
    position: absolute;
    width:400px;
    right: 0;
    left: 0;
    margin: auto;
}

3
Comment cela marche-t-il? Pouvez-vous expliquer pourquoi votre réponse est valable?
afuzzyllama

1
J'aime vraiment cette méthode par rapport aux autres 99% du temps, vous n'avez pas à gérer le remplissage, les bordures, etc. Je n'ai jamais vu cela échouer, la prochaine fois, donnez un exemple si cela échoue pour vous.
Dan

1
Ce qui est cool à propos de cette solution, c'est qu'elle fonctionne également avec des pourcentages, mais je ne sais pas si elle est compatible avec tous les navigateurs
maljukan

1
Sensationnel. Je ne m'attendais pas à ce que cela fonctionne mais cela a fonctionné pour moi comme un charme
Awais Umar

4
Je suis d'accord que cela devrait être la bonne réponse, une marge de -200px me crie hack.
Mani5556

36

Je sais que je suis en retard à la fête, mais j'ai pensé que je fournirais une réponse ici pour les personnes qui ont besoin de 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, lorsque vous pourriez avoir besoin d'un alignement vertical, simplement en ajustant les propriétés comme suit:

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

1
Whaaat. C'est génial! Pouvez-vous expliquer comment cela fonctionne? Edit: J'ai chassé et cela ressemble à la gauche: 50% déplace l'emplacement de gauche du div vers le centre, ce qui n'est pas vraiment le centre. Mais le translateX le décale de 50% de la largeur du contenu
Aziz Javed

2
Le positionnement absolu se positionnera à partir du coin supérieur gauche d'un élément. L'utilisation de translate le déplacera au montant par rapport à sa taille.
Michael Giovanni Pumo

3
Michael, je voulais juste que tu le saches, tu n'étais pas en retard pour la fête ... et pour ceux qui ne le savent pas: transform: translate (-50%, -50%); fait à la fois le centrage vertical et horizontal avec 1 ligne
Marvel Moe

4

Pour le centrer à la fois verticalement et horizontalement, procédez comme suit:

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

0

S'il est nécessaire que vous ayez 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é de manière relative.


0

J'avais le même problème et ma limitation était que je ne peux 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 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

Ou vous pouvez utiliser des unités relatives, par exemple

#thing {
    position: absolute;
    width: 50vw;
    right: 25vw;
}

0

.contentBlock {
    width: {define width}
    width: 400px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
 
}


-22

Oui:

div#thing { text-align:center; }

5
Cela alignera le contenu dans un div. Cela n'alignera pas le div au centre de la page. Il n'alignera pas non plus un div positionné de manière absolue autre que le contenu qu'il contient qui fait partie du flux de documents.
CarterMan
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.