保证金:0自动不居中?

gra*_*tur 3 css

我在Chrome,Firefox和Safari中尝试了以下代码,但我的div并没有完全集中.

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>
Run Code Online (Sandbox Code Playgroud)

custom.css:

.center {
  width: 400px;
  margin: 0 auto;
  border: 5px solid black;
}
Run Code Online (Sandbox Code Playgroud)

这会在Chrome中生成以下内容: 替代文字

你可以看到左边距大于右边距.

我究竟做错了什么?

小智 15

这是因为正文有一个边距(浏览器默认):

body { margin: 0px; }
Run Code Online (Sandbox Code Playgroud)

您可能想要使用CSS重置.


如果你的窗户更大,它应该看起来很正常.在你的截图中,它就像:

杯