Aligner une div au centre de la page alors que sa position est absolue ?

Question

Comment puis-je align a DIV au centre de ma page alors que son position es absolute ? Si possible sans en utilisant le javascript.

Answer 1

UPDATE : Il s'agit d'une ancienne réponse et la réponse se trouve actuellement juste en dessous donne une solution plus agréable qui fonctionne même si votre div a une largeur dynamique. Une autre solution consiste à utiliser margin: auto peut être trouvée ici, sur une question différente, mais connexe .

Vous peut Si vous connaissez la largeur de l'écran, vous pouvez le faire. DIV que vous souhaitez centrer.

CSS :

div
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 300px;
    margin-top: -150px;
    margin-left: -200px;
}

Vous positionnez le coin supérieur gauche au centre, puis vous utilisez des marges négatives correspondant à la moitié de la largeur pour le centrer.

Answer 2

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

Answer 3

Essayez ceci :

position: absolute;
width: 600px;
left: 50%
margin-left: -300px;

Answer 4

Il n'est pas possible de faire en sorte que le langage HTML centre automatiquement tout ce qui est positionné de manière absolue. D'ailleurs, HTML centre à peine quelque chose horizontalement en utilisant les marges CSS :-)

Comme son nom l'indique, le positionnement absolu consiste à fixer les positions du haut et de la gauche et à appliquer les marges par rapport à ces positions. Le positionnement absolu ne tient pas compte de l'auto.

Il existe des solutions utilisant JavaScript et jQuery. En voici une que j'ai écrite et que j'utilise beaucoup :

plugin jQuery .centerInClient()

J'espère que cela vous aidera.

Answer 5

La signification de position: absolute est exactement ce que vous voulez spécifier, à savoir à quelle distance des marges de la page votre div doit être placée. Comme vous ne connaissez pas la largeur de l'écran a priori, il n'y a aucun moyen de la centrer.

Je suppose que vous voulez simplement supprimer la div du flux de la page, tout en la gardant centrée. Dans ce cas, il peut suffire d'ajouter une div conteneur, comme

<div id="external">
    <div id="internal">
    </div>
</div>

et le CSS

#external {
    position: absolute
}

#internal {
    margin: 0 auto
}

Je n'ai pas testé la présentation ci-dessus, mais je pense qu'elle devrait fonctionner.