Why isn't this DIV centered? [duplicate] - html

Question

This question already has answers here:
Best way to center a <div> on a page vertically and horizontally? [duplicate]
(30 answers)
Closed 9 years ago.
I have a DIV that I want to keep centered and docked to the bottom of the page. I've pretty much achieved that except that it lists to the right. I've setup a jsFiddle to demonstrate the problem.
I suspect that I need to adjust margins but so far my attempts have been fruitless. I tried adding:
margin: 0;
but nothing. What am I missing?

Answer 1

If you mean the little bit of space to the left, then I would think adding left: 0; would solve the problem.
#footer {
position: fixed;
bottom: 0;
width: 100%;
border: 1px solid red;
text-align: center;
margin: 0;
left: 0;
}
You need to watch though because you are setting the width to be 100% and also setting a border which makes the div wider than 100%.

Answer 2

I suspect this is the default margin/padding on the body
body {
margin: 0;
}
will fix it.

Answer 3

You need to set left to 0 (zero) and box-sizing to border-box!
Check this: http://jsfiddle.net/pR4P5/7/
#footer {
position: fixed;
bottom: 0;
width: 100%;
border: 1px solid red;
text-align: center;
margin: 0;
box-sizing: border-box;
left:0;
}
Have a nice day,
Alberto

Answer 4

Remove border: 1px solid red; and add left: 0; to #footer.
Here is the JSFiddle.

Answer 5

Try replacing margin: 0; with left: 0;. This should lock the div onto the left of the page, centering it. I would also not use a border, that will add on some pixels to the width and height, making it less centered. I would instead use only border-top: 1px solid red;.
Hope I helped you solve your annoying problem.

Answer 6

Paulie_D's answer is correct you need to add margin: 0 to the body. I'd imagine you think its not properly centred because of the border on the footer.
Try adding:
box-sizing: border-box;
to your footer element.

Answer 7

Change the width: 100% to
left: 0;
right: 0;
So it would become: http://jsfiddle.net/pR4P5/6/
Complete CSS:
#footer {
position: fixed;
bottom: 0;
left:0;
right: 0;
border: 1px solid red;
text-align: center;
margin: 0;
}
Result would be 100% width while you can keep your border of 1px.
Note when defining width 100% and adding a border you might be better of adding box-sizing to it.
Also, margin: 0; to body is a great way to avoid headaches.
(box-sizing: content-box; - http://quirksmode.org/css/user-interface/boxsizing.html)

Answer 8

To Center the div:
html, body {
margin:0;
padding:0;
width:100%;
height:100%;
}
To keep the borders included in the positioning, too:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
DEMO: http://jsfiddle.net/pR4P5/8/
Read More at:
CSS Reset: http://meyerweb.com/eric/tools/css/reset/
box-sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing