为什么我的页面没有居中？

我知道，这是一个新手的问题，但如果你能给我一只手，告诉我，我在做什么错了，我会很感激的是：为什么我的页面没有居中？

当我和HTML和CSS试验我决定创建一个固定大小的页面应该居中在屏幕上。要做到这一点，我决定通过使相对其位置移动到[正文]标签放置和写作移动它：

position: absolute; 
padding: 1em; 
width: 960px; 
height: 600px; 
left: 50%; 
top: 50%; 
margin-left: -480px; 
margin-top: -300px;

Hovever它并没有完全发挥预期的，这是我得到的结果：

Screenshot taken from the page

我期待看到黄色的盒子既完美水平和垂直居中，而是我看到它是稍微偏离中心。我试图在Safari，Firefox和Chrome上加载页面，我得到的结果相同，因此我已经怀疑我知道这是我的错:-)

你能帮我解释我做错了什么吗？非常感谢您

这是页面的完整的HTML + CSS代码，我已经写了：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test 1</title> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
      padding: 0; 
      margin: 0; 
     } 
     html { 
      background-color: red; 
      width: 100%; 
      min-height: 100%; 
      font-family: Helvetica, Arial, sans-serif; 
      font-size: 16px; 
     } 
     body { 
      padding: 1em; 
      background-color: yellow; 
      width: 960px; 
      height: 600px; 
      position: absolute; 
      left: 50%; 
      top: 50%; 
      margin-left: -480px; 
      margin-top: -300px; 
     } 
    </style> 
</head> 
<body> 
    This is my website 
</body> 
</html>

来源

2012-07-19 Cesco

这是因为填充。

如果您将主体的填充设置为0，则它可以工作（测试）。

如果您需要填充，请在您的身体内部添加一个内部100％宽度div，并为此内部div填充内容。

来源

2012-07-19 18:03:52

您可以尝试使用css3框大小模型而不是css2框模型。 [这是一篇很好的文章]（http://css-tricks.com/box-sizing/）。这将解决你提出的填充问题。 – imakeitpretty 2012-07-19 18:18:37

是的，这是正确的。 – Ana 2012-07-19 18:24:55

非常感谢。使用您的提示和@imakeitpretty发布的文章，我开始明白，内部填充与一个对象的总宽度和高度相符;在我想这之前，例如，如果一个宽度为100px的div的左右填充为10px，则总宽度不会改变，但看起来我错了：总宽度增长到120px在这种情况下。 – Cesco 2012-07-19 20:29:48

试试这个：

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test 1</title> 
    <meta charset="utf-8"> 
</head> 
<body> 
    This is my website 
</body> 
</html>

CSS：

html, body { 
    padding: 0; 
    margin: 0; 
} 
html { 
    background-color: red; 
    width: 100%; 
    min-height: 100%; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 16px; 
} 
body { 
    padding: 1em; 
    background-color: yellow; 
    width: 960px; 
    height: 600px; 
    margin:auto; 
    margin-top: -300px; 
}

的jsfiddle：http://jsfiddle.net/qecwx/

来源

2012-07-19 18:04:01

非常感谢你的建议和链接 – Cesco 2012-07-19 20:24:40

的margin-left和margin-top应该有一半-ve值分别为width和height：

margin-left: /* minus half of width */ 
margin-top: /* minus half of height */

您需要把适当的值。

在容器中，你还可以使用中心：

margin:0 auto;

前提是你已经指定width太

来源

2012-07-19 18:04:57 Blaster

如果你看看他的CSS，你会发现他已经做到了。这里的问题是填充。 – Ana 2012-07-19 18:26:19

感谢您的反馈意见，无论如何我真的很感激 – Cesco 2012-07-19 20:24:05

基本上，你要对你的身体标签页边距设置为汽车像这

body { 
     padding: 1em; 
     background-color: yellow; 
     width: 960px; 
     height: 600px; 


     margin-left: auto; 
     margin-right: auto; 
    }

垂直身体中心需要更多的工作。

来源

2012-07-19 18:11:20

非常感谢您的反馈 – Cesco 2012-07-19 20:22:35

只是它乱搞了几分钟，这就是我想出了，似乎满足您的需求：

body { 
    padding: 1em; 
    background-color: yellow; 
    width: 960px; 
    height: 600px; 
    position: relative; 
    margin: 0 auto; 
    margin-top: 10%; 
}

我所做的只是去掉保证金左：和做了保证金： 0自动;对齐左侧和右侧。然后我设定了保证金率：10％;以顶部和底部为中心。我也将定位设置为相对。希望这有助于。

来源

2012-07-19 20:44:34 Cameeob2003

非常感谢 – Cesco 2012-07-22 15:23:03

为什么我的页面没有居中？

回答

相关问题