Question

我知道这是一个新手问题，但是如果你能帮助我并告诉我我做错了什么，我真的很感激：

当我在尝试使用HTML和CSS时，我决定创建一个固定大小的页面，该页面应该以屏幕为中心。为此，我决定放置[body]标签，使其位置相对并通过写入来移动它：

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>

Answer 1

那是因为填充。

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

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

Answer 2

试试这个：

<强> 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/

Answer 3

margin-left和margin-top应分别为width和height设置一半的值：

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

您需要输入适当的值。

在容器中，您还可以使用：

居中

margin:0 auto;

如果您已经指定了width

Answer 4

只是搞乱了几分钟，这就是我想出来的，似乎符合你的需求：

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

我所做的就是删除保证金左边：做一个保证金：0自动;对齐左右两侧。然后我设置了保证金最高限额：10％;使顶部和底部居中。我也把定位设置为相对。希望这会有所帮助。

Answer 5

基本上，您希望将body标签上的边距设置为 auto ，就像这样

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


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

垂直居中需要做更多的工作。

为什么我的页面不居中？

5 个答案: