2

我知道这是一个新手问题，但如果你能帮我一把，告诉我我做错了什么，我会非常感激：

当我尝试使用 HTML 和 CSS 时，我决定创建一个固定大小的页面，该页面应位于屏幕中央。为此，我决定将 [body] 标签设为相对位置，并通过以下方式移动它：

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

悬停它并没有像预期的那样工作，这就是我得到的结果：

从页面截取的屏幕截图

我期待看到黄色框在水平和垂直方向上都完美居中，但我发现它稍微偏离了中心。我试图在 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>
4

5 回答 5

3

那是因为填充。

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

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

于 2012-07-19T18:03:52.637 回答
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/

于 2012-07-19T18:04:01.527 回答
2

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

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

您需要输入适当的值。

在容器中，您还可以使用以下命令居中：

margin:0 auto;

width前提是您也已经指定

于 2012-07-19T18:04:57.490 回答
2

只是搞砸了几分钟，这就是我想出的似乎符合您需求的方法：

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

我所做的只是删除了 margin-left: 并做了一个 margin: 0 auto; 对齐左侧和右侧。然后我设置 margin-top: 10%; 使顶部和底部居中。我也将定位设置为相对。希望这会有所帮助。

于 2012-07-19T20:44:34.383 回答
1

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

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


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

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

于 2012-07-19T18:11:20.480 回答