¿Cómo puedo centrar horizontalmente un elemento posicionado absoluto dentro de un div de ancho 100%? [duplicar]

Esta pregunta ya tiene una respuesta aquí:

En el siguiente ejemplo, #logo está posicionado absolutamente y necesito que esté centrado horizontalmente dentro de #header. Normalmente, haría un margin:0 auto para elementos relativamente posicionados, pero estoy atrapado aquí. ¿Puede alguien mostrarme el ¿camino?

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
}
 136
csshtml
Author: Alessandro Minoccheri, 2013-05-26
Source

6 answers

Si desea alinear el centro en el atributo izquierdo.
Lo mismo es para la alineación superior, puede usar margin-top: (ancho / 2 de su div), el concepto es el mismo del atributo left.
Es importante establecer el elemento header en position: relative.
prueba esto: 

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

DEMO

Si no desea utilizar cálculos puede hacer esto:

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

DEMO2

 268
Author: Alessandro Minoccheri,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-31 10:25:42

Tendrá que asignar tanto left como right propiedad 0 valor para margin: auto para centrar el logotipo.

Así que en este caso: 

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

Es posible que también desee establecer position: relative para #header.

Esto funciona porque, al establecer left y right a cero, se estirará horizontalmente el elemento absolutamente posicionado. Ahora la magia sucede cuando margin se establece en auto. margin ocupa todo el espacio extra(igualmente en cada lado) dejando el contenido a su width especificado. Esto resulta en contenido alineándose al centro.

 113
Author: Arjun,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-30 07:35:45

Faltaba el uso de calc en las respuestas, que es una solución más limpia.

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

jsFiddle

Funciona en la mayoría de los navegadores modernos: http://caniuse.com/calc

Tal vez sea demasiado pronto para usarlo sin un respaldo, pero pensé que tal vez para los futuros visitantes sería útil.

 17
Author: pzin,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-30 14:11:00

En mi experiencia, la mejor manera es right:0;, left:0; y margin:0 auto. De esta manera, si el div es ancho, entonces no se ve obstaculizado por el left: 50%; que compensará su div que resulta en la adición de márgenes negativos, etc.

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

#logo {
    background:red;
    height:50px;
    position:absolute;
    width:50px;
    margin:0 auto;
    right:0;
    left:0;
}
 6
Author: Kevin Lynch,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-26 10:16:30

Aquí está el método mejor practicado para centrar una div como posición absoluta

VIOLÍN DE DEMOSTRACIÓN

Código - 

#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;
}
 4
Author: Rohit Agrawal,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-26 10:18:02

Es fácil, simplemente envuélvalo en una caja relativa como esta: 

<div class="relative">
 <div class="absolute">LOGO</div>
</div>

El cuadro relativo tiene un margen: 0 Auto; y, importante, una anchura...

 2
Author: user3849374,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-07-17 13:37:08