Comment centrer le div absolu horizontalement en utilisant CSS?

J'ai une div et je veux qu'elle soit centrée horizontalement - même si je lui donne margin:0 auto;qu'elle n'est pas centrée ...

.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 définir left: 0et right: 0.

Ceci spécifie la distance de décalage des bords de marge par rapport aux côtés de la fenêtre.

Comme 'top', mais spécifie dans quelle mesure le bord de la marge droite d'une boîte est décalé par rapport au [gauche / droite] du bord [droit / gauche] du bloc contenant de la boîte.

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

Remarque: l'élément doit avoir une largeur inférieure à la fenêtre, sinon il occupera toute la largeur de la fenêtre.

Si vous pouviez utiliser des requêtes multimédias pour spécifier une marge minimale , puis passer à autodes tailles d'écran plus grandes.

.container {
  left:0;
  right:0;

  margin-left: auto;
  margin-right: auto;

  position: absolute;
  width: 40%;

  outline: 1px solid black;
  background: white;
}

<div class="container">
  Donec ullamcorper nulla non metus auctor fringilla.
  Maecenas faucibus mollis interdum.
  Sed posuere consectetur est at lobortis.
  Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
  Sed posuere consectetur est at lobortis.
</div>

Cela ne fonctionne pas dans IE8 mais pourrait être une option à considérer. C'est surtout utile si vous ne souhaitez 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, tout ce que vous avez à faire est de définir la marge, 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;
   
   }

<div class="centeredBox">Centered Box</div>

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

<div class="box">
  <div class="A">I'm horizontally centered.</div>
</div>

.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}

si facile, n'utilisez que les propriétés margin et left, right:

.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 au centre en html - Obinb blog

Voici un lien s'il vous plaît utiliser ceci pour faire le div au centre si la position est absolue.

HTML:

<div class="bar"></div>

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 margin:auto;sur des position:absolute;éléments, supprimez-le simplement si vous n'en avez pas besoin, mais si vous le faites, vous pouvez utiliser left:30%;((100% -40%) / 2) et des requêtes multimédias 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;
    }

}