3

I've tried the following code in Chrome, Firefox, and Safari, but my div isn't quite being centered.

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <link href="custom.css" media="screen" rel="stylesheet" type="text/css" />
</head> 
<body>  
    <div class="center">Hello!</div>
</body> 
</html>

custom.css:

.center {
  width: 400px;
  margin: 0 auto;
  border: 5px solid black;
}

This produces the following in Chrome: alt text

and you can see that the left margin is bigger than the right margin.

What am I doing wrong?

5
  • Is that your full custom.css file? What does the padding on your <html> and <body> look like? Oct 30, 2010 at 20:15
  • Yeah, that was my full custom.css file. I didn't realize there were default padding or margins on html and body, so Time Machine's answer fixed it.
    – grautur
    Oct 30, 2010 at 20:19
  • 1
    have fun! Oh, don't forget to click the green checkmark before a zombie eats you, as it's Halloween. :)
    – user142019
    Oct 30, 2010 at 20:30
  • @Time Machine: yep, I was waiting for the 10 minute mark to pass :). Thanks!
    – grautur
    Oct 30, 2010 at 21:59
  • If this happened to a button, img, input etc., just set the display property of that to block. Ex. button{display:block} Apr 26, 2014 at 16:10

4 Answers 4

16

It is because the body has a margin (default for browsers):

body { margin: 0px; }

You might want to use a CSS reset.


It should look normal if your window is bigger. In your screenshot it's like:

mug

1
  • Is it OK to apply body { margin: 0 auto; } to center the page, or should we be adding a div wrapper with an ID to avoid some sort of bugs? Thanks! For example, here it suggests to use #wrapper, and also apply text-align: center to the body: webdesignerforum.co.uk/topic/… (but doesn't really explain it well)
    – Baumr
    Nov 4, 2012 at 5:24
2

The window is too narrow. Auto margins centre elements in the available space, if the space is narrower than the element, then it becomes left aligned.

So, from left to right you see the padding or margin on the body element (margin in this case as it is Chrome), then the border for the div, then the 400px of width, then the next border, and then the window edge as there isn't any more space to render the body's right margin.

1

I had trouble getting buttons to center in chrome. giving width to the buttons will work. But this causes an issue with all the buttons having a width.

This fix seems to be playing happy in the browsers. The main fix would be to give the input type buttons a width, that works, but when you have a large web app managing all those may not be feasible.

Found this, yes it is a hack, but appears to be working in IE7-9 FF chrome.

.submitArea .actButton  {margin-right: auto !important; margin-left: auto !important; display: block;}
@media screen and (-webkit-min-device-pixel-ratio:0) { .submitArea .actButton  {display: inline-block !important;}}  /* chrome hack - needs width for buttons to center */
-1

you need to add relative positioning to your css.

.center {
 position:relative;
 width: 400px;
 margin: 0 auto;
 border: 5px solid black;
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.