Comment centrer horizontalement un div absolu à l'aide de CSS ?

Question

J'ai un div et je veux qu'il soit centré horizontalement - bien que je lui donne 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;
}

Answer 1

Si facile, il suffit d'utiliser la marge et les propriétés gauche, droite :

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

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

Answer 2

Voici un lien que vous pouvez utiliser pour placer 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

Answer 3

Les deux centres verticaux et horizontaux utiliser left:50%;top:50%; transform: translate(-50%, -50%);

.centeredBox {
    margin: 0 auto;
    left: 50%;
    top:50%;

   /** Position should be absolute */
    position: absolute;
    /** And box must have a width, any width */
    width: 40%;
    background: #faebd7;
    text-align: center;
    padding:10px;
    transform: translate(-50%, -50%);

   }

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

Answer 4

Vous ne pouvez pas utiliser margin:auto; sur position:absolute; il suffit de l'enlever si vous n'en avez pas besoin, cependant, si vous en avez besoin, vous pourriez utiliser left:30%; ((100%-40%)/2) et des requêtes 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;
    }

}