html - imagen - posicionar div css

¿Cómo centro horizontalmente un elemento de posición absoluta dentro de un div de ancho del 100%?

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo centrar el elemento absolutamente posicionado en div? 25 respuestas

En el siguiente ejemplo, #logo está posicionado en forma absoluta y necesito que esté centrado horizontalmente en #header . Normalmente, haría un margin:0 auto para elementos relativamente posicionados, pero estoy atascado 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
}

Answer 1

Deberá asignar el valor de la propiedad 0 left y a la right para margin: auto para centrar el logotipo.

Entonces 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 la position: relative para #header .

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

Answer 2

En mi experiencia, la mejor manera es right:0; , left:0; y margin:0 auto . De esta manera, si el div es amplio, entonces no te verás obstaculizado por la left: 50%; eso 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;
}

Answer 3

Es fácil, solo envuélvelo en una caja relativa como esta:

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

El cuadro relativo tiene un margen: 0 Automático; y, importante, un ancho ...

Answer 4

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;
}

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

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

Answer 5

Si quiere alinear el centro en el atributo izquierdo.
Lo mismo ocurre con la alineación superior, puede usar margin-top: (ancho / 2 de su div), el concepto es el mismo que el atributo left.
Es importante establecer el elemento del encabezado en la posición: relativo.
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

Answer 6

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

DEMO FIDDLE

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;
}