web-dev-qa-db-fra.com

Comment centrer absolu div horizontalement en utilisant CSS?

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;
}
csshtmlcenterabsolute
168
CoreDo

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

Ceci spécifie dans quelle mesure les bords des marges doivent être décalés des côtés de la fenêtre.

Comme "haut", mais indique dans quelle mesure la marge droite d'un cadre est décalée par rapport au [gauche/droite] du bord [droit/gauche] du bloc le contenant.

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

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

Si vous pouviez utiliser des requêtes de support pour spécifier une marge minimum , puis passer à auto pour des 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>
387
thgaskell

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%);
}
115
Adel

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

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>
13
Meta Pakistani

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>
5
Ron Royston
.centerDiv {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align:center;
}
3
Z. Rahman Raju

si facile, utilisez uniquement 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 un élément div au centre de son blog html-Obinb

2
Neko

Voici un lien s'il vous plaît utilisez-le pour faire la div dans le 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

0
Amit Kumar