Comment centrer horizontalement un élément positionné en absolu à l'intérieur d'un div de largeur 100 % ?

Question

Dans l'exemple ci-dessous, #logo est positionné de manière absolue et j'ai besoin qu'il soit centré horizontalement à l'intérieur de #header . Normalement, je ferais un margin:0 auto pour des éléments relativement positionnés mais je suis bloqué ici. Quelqu'un peut-il me montrer le chemin ?

JS Fiddle : http://jsfiddle.net/DeTJH/

HTML

<div id="header">
    <div id="logo"></div>
</div>

CSS

#header {
    background:black;
    height:50px;
    width:100%;
}

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px
}

Answer 1

Si vous voulez aligner le centre sur l'attribut gauche.
Il en va de même pour l'alignement supérieur, vous pouvez utiliser margin-top : (width/2 de votre div), le concept est le même que pour l'attribut left.
Il est important de définir l'élément d'en-tête comme position:relative.
Essayez ceci :

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    left:50%;
    margin-left:-25px;
}

DEMO

Si vous souhaitez ne pas utiliser de calculs, vous pouvez le faire :

#logo {
  background:red;
  width:50px;
  height:50px;
  position:absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
}

DEMO2

Answer 2

Vous devrez assigner les deux left y right propriété 0 valeur pour margin: auto pour centrer le logo.

Donc dans ce cas :

#logo {
  background:red;
  height:50px;
  position:absolute;
  width:50px;
  left: 0;
  right: 0;
  margin: 0 auto;
}

Vous pouvez également définir position: relative para #header .

Cela fonctionne parce que, en fixant left y right à zéro étire horizontalement l'élément positionné de manière absolue. La magie opère maintenant lorsque margin est réglé sur auto . margin occupe tout l'espace supplémentaire (également de chaque côté), laissant le contenu à sa place. width . Le contenu est alors aligné au centre.

Answer 3

Il manquait l'utilisation de calc dans les réponses, ce qui est une solution plus propre.

#logo {
  position: absolute;
  left: calc(50% - 25px);
  height: 50px;
  width: 50px;
  background: red;
}

Fonctionne dans la plupart des navigateurs modernes : http://caniuse.com/calc

Il est peut-être trop tôt pour l'utiliser sans solution de repli, mais j'ai pensé que cela pourrait être utile aux futurs visiteurs.

Answer 4

D'après mon expérience, le meilleur moyen est right:0; , left:0; y margin:0 auto . De cette façon, si le div est large, vous n'êtes pas gêné par le format left: 50%; qui compensera votre div, ce qui entraînera l'ajout de marges négatives, etc.

DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}

Answer 5

Voici la meilleure méthode pour centrer un div en position absolue.

DEMO FIDDLE

code --

#header {
background:black;
height:90px;
width:100%;
position:relative; // you forgot this, this is very important
}

#logo {
background:red;
height:50px;
position:absolute;
width:50px;
margin: auto; // margin auto works just you need to put top left bottom right as 0
top:0;
bottom:0;
left:0;
right:0;
}