¿Cómo posicionar un div en el centro inferior de la pantalla

Question

tengo este CSS:

#manipulate 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:#063; 
    bottom:0px; 
    right:25%; 
} 

tengo este html:

<div id="manipulate" align="center"> 

</div> 

¿Cómo nos posicionamos que div en la parte inferior central de la pantalla?!?

Answer 1

align="center" no tiene ningún efecto.

Dado que tiene position:absolute, le recomendaría posicionarlo 50% desde la izquierda y luego restar la mitad de su ancho de su margen izquierdo.

#manipulate { 
    position:absolute; 
    width:300px; 
    height:300px; 
    background:#063; 
    bottom:0px; 
    right:25%; 
    left:50%; 
    margin-left:-150px; 
} 

Answer 2

Use márgenes negativos:

#manipulate 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    margin-left:-150px; 
    background:#063; 
    bottom:0px; 
    left:50%; 
} 

La clave aquí es la width, left y margin-left propiedades.

Answer 3

Puede centrarlo utilizando los márgenes negativos, PERO tenga en cuenta que se centrará exactamente en el centro de la pantalla SI cualquiera de los que contiene div no está ajustado a la posición: relativa;

Por ejemplo. http://jsfiddle.net/aWNCm/

Por lo tanto, la mejor manera de centrar exactamente este div es establecer las propiedades de posición de propiedades correctas para sus divisiones contenidas, de lo contrario, se perderá de alguna manera al azar.

Answer 4

Aquí es una solución con dos divs:

HTML:

<div id="footer"> 
     <div id="center"> 
      Text here 
     </div> 
    </div> 

CSS:

#footer { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
} 
#center { 
    width: 500px; 
    margin: 0 auto; 
} 

Answer 5

Si no se siente cómodo con el uso de los márgenes negativos, mira esto.

HTML -

<div> 
Your Text 
</div> 

CSS -

div { 
    position: fixed; 
    left: 50%; 
    bottom: 20px; 
    transform: translate(-50%, -50%); 
    margin: 0 auto; 
} 

Especialmente útil cuando no conocemos la anchura de la div.