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

Vous devez définir left: 0 y right: 0 .

Ce paramètre indique de combien les bords de la marge doivent être décalés par rapport aux côtés de la fenêtre.

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

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

Note : L'élément doit avoir une largeur plus petit que la fenêtre, sinon il occupera toute la largeur de la fenêtre.

Si vous pouviez utiliser les requêtes média pour spécifier une minimum et passer ensuite à auto pour les écrans de plus grande taille.

---

.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>

Answer 2

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

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

Answer 3

Bien que les réponses ci-dessus soient correctes, pour simplifier la tâche des débutants, il suffit de définir la marge, la gauche et la droite. Le code suivant le fera à condition que la largeur est fixée y position est absolu :

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

Vous pouvez également utiliser d'autres valeurs pour la largeur, comme max-content , fit-content etc si vous ne voulez pas définir une valeur avec des unités

Démonstration :

.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>

Answer 4

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

Answer 5

Flexbox ? Vous pouvez utiliser le système 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>