Comment centrer le div absolu horizontalement en utilisant CSS?

J’ai un div et je veux qu’il soit centré horizontalement – bien que je lui donne une margin:0 auto; ce n’est pas centré …

 .container { position: absolute; top: 15px; z-index: 2; width:40%; max-width: 960px; min-width: 600px; height: 60px; overflow: hidden; background: #fff; margin:0 auto; } 

Vous devez mettre à left:0; right:0; left:0; right:0; .

Ceci spécifie la distance à laquelle les bords de la marge doivent être décalés des côtés de la fenêtre.

http://www.w3.org/TR/CSS2/visuren.html#position-props


http://jsfiddle.net/SS6DK/

CSS

 .container { position: absolute; top: 15px; z-index: 2; width:40%; max-width: 960px; min-width: 600px; height: 60px; overflow: hidden; background: #fff; margin: 0 auto; left: 0; right: 0; } 

Note: Vous devez définir la width ou cette réponse ne fonctionnera pas . Cela signifie que cette réponse n’est pas utile pour les éléments avec des largeurs dynamics.

Cela ne fonctionne pas dans IE8 mais peut être une option à considérer. C’est surtout utile si vous ne voulez pas spécifier de largeur.

 .element { position: absolute; left: 50%; transform: translateX(-50%); } 

Bien que les réponses ci-dessus soient correctes, mais pour simplifier les choses pour les débutants, il vous suffit de définir les marges à gauche et à droite. le code suivant le fera à condition que la largeur soit définie et que la position soit absolue:

 margin: 0 auto; left: 0; right: 0; 

Démo:

 .centeredBox { margin: 0 auto; left: 0; right: 0; /** Position should be absolute */ position: absolute; /** And box must have a width, any width */ width: 40%; background: #faebd7; } 
 
Centered Box

Flexbox? Vous pouvez utiliser flexbox.

 .box { display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; } .box div { border:1px solid grey; flex: 0 1 auto; align-self: auto; background: grey; } 
 
I'm horizontally centered.
 .centerDiv { position: absolute; left: 0; right: 0; margin: 0 auto; text-align:center; } 

si facile, n’utilisez que les marges et les propriétés à gauche:

 .elements { position: absolute; margin-left: auto; margin-right: auto; left: 0; right: 0; } 

Vous pouvez en voir plus dans cette astuce => Comment définir l’élément div pour centrer dans le blog html- Obinb

Voici un lien s’il vous plaît utilisez ceci pour faire le div dans le centre si la position est absolue.

HTML:

 

CSS:

 .bar{ width:200px; border-top:4px solid red; position:absolute; margin-left:auto; margin-right:auto; left:0; right:0; } 

Exemple jsfiddle

Vous ne pouvez pas utiliser la margin:auto; en position:absolute; éléments, il suffit de le supprimer si vous n’en avez pas besoin, cependant, si vous le faites, vous pouvez utiliser à left:30%; ((100% -40%) / 2) et requêtes de média pour les valeurs max et min:

 .container { position: absolute; top: 15px; left: 30%; z-index: 2; width:40%; height: 60px; overflow: hidden; background: #fff; } @media all and (min-width:960px) { .container { left: 50%; margin-left:-480px; width: 960px; } } @media all and (max-width:600px) { .container { left: 50%; margin-left:-300px; width: 600px; } }