How to put a div in the lower 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 place this div in the lower center of the screen?!?

Answer 1

align="center" has no effect.

Since you have position:absolute , I would recommend placing it 50% on the left, and then subtracting half 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

Use negative fields:

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

The key here are the width , left and margin-left properties.

Answer 3

If you are not comfortable using negative fields, 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 do not know the width of the div.

Answer 4

Here is a solution with two 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

You can center it using negative fields, but note that it will be centered exactly in the center of the screen. IF any containing div is NOT set to: relative;

For example. http://jsfiddle.net/aWNCm/

So, the best way to accurately center this div is to set the correct properties of property properties for its containing divs, otherwise it will be lost in some random ways.