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;

html css xhtml Steve
la source

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

JacobE
la source

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

Matheus Oliveira
la source

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

Michael Giovanni Pumo
la source

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

Armin
la source

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.

Dalvallana
la source

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>

Usman Shaukat
la source

0

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

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

Aliaksei
la source

0

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

Développer l'extrait

Panwar
la source

-22

Oui:

div#thing { text-align:center; }

la source

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

Centrer sur une division parfaitement positionnée

Réponses: