How to put a div in the lower center of the screen

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?!?

+8
html css
source share
5 answers

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; } 
+16
source share

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.

+15
source share

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.

+8
source share

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; } 
+7
source share

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.

+1
source share

All Articles