html - body 元素的填充值增加了

Question

我正在努力做到这一点，以便我可以使用填充等将我的正文部分放在页面的中间。但是由于某种原因，它自己的框不在中间。我不确定我是否以正确的方式进行操作，但是当您看到代码时。主要部分称为“部分”这是我的主体，我将在其中包含所有文本等。

主要代码:

http://codepen.io/Blindeagle141/pen/mVpYyM

如您所见。蓝色框仍在左侧。我需要它像这样位于页面的中心:

  -----------------------------------------------
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                      Nav Bar|       |
|-----------------------------------------------                        
|    |                                 |       |                   
|    |                                 |       |                    
|    |               Body              |       |                
|    |                                 |       |                    
|    |                                 |       |                    
|-----------------------------------------------                        
|    |Logo                        Info |       |
|-----------------------------------------------                        
|    |                                 |       |                    
 -----------------------------------------------

Answer 1

要将您的 div 水平居中，请将 padding 属性替换为 margin: 0px auto

如果想让它在header下方，还需要指定垂直边距，例如margin: 150px auto 0px auto

基本上，padding 将标记移动到 div 内部，因此背景颜色仍将跨越 padding。如果要移动整个 div 的边界，请使用边距。这叫做盒模型，作为定位的引用。