How do I position a div at the bottom center of the screen

Question

I have this css:

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

I have this html:

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

How do we position that div at the bottom center of the screen?!?

Answer 1

align="center" has no effect.

Since you have position:absolute, I would recommend positioning it 50% from the left and then subtracting half of its width from its left margin.

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

Answer 2

If you aren't comfortable with using negative margins, check this out.

HTML -

<div>  Your Text </div> 

CSS -

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

Especially useful when you don't know the width of the div.