Question

我需要帮助在CSS中居中页面。问题是，我几乎不知道CSS中的任何内容。我在堆栈溢出时尝试了一些我发现的东西，但似乎没有任何效果。我个人没有写代码，我只需要整个页面中心。这是代码的一部分，在我看来，是我需要调整的代码。如果没有，请告诉我应该调整哪部分代码才能使其正常工作。我会非常感谢任何帮助和想法。

/* Main Layout */
html, body {
    height:100%;
    margin-bottom: 1px;
}
body {
    font:59%/1.2 Helvetica, Arial, sans-serif;
    color:#000;
    background: #eee url(http://www.kovari.cz/images/download.jpg) repeat;
}

Answer 1

#wrapper {
    margin: 0 auto;
    width: 757px !important; /* this line is pre-existing css */
}

Answer 2

为了能够居中，你需要知道它的宽度。目前，未定义主体宽度，因此默认为100％（浏览器宽度）。为了使事情有效，你需要这样的东西（我们假设宽度是960）：

body {
    width: 960px;
    margin: auto;
}

Demo

Answer 3

上面的代码只是一个body属性，你不应该像那样居中页面。（嗯，你可以，但最好用一个包装div来居中）

我假设您已将类 .container分配给需要居中的div元素...

例如：

.container将用CSS包装你的内容。

.container {
   width: ; /* % or px */
   margin: auto 0; /* This will center this DIV in the middle */
}

现在，您希望在此容器中添加其他内容/其他div元素。

我希望你能大致了解这是如何运作的，祝你的项目好运。

Answer 4

将内容置于正文标记中

body {
    text-align: center;
}

您也可以使用：

.content {
    width: 900px;
    margin: 0px auto;
}

这将使元素具有类内容

Answer 5

您使用margin auto属性和宽度。

.page {
  width: 978px;
  margin: 0 auto;
  position: relative;
}

http://fiddle.jshell.net/aS3h3/1/
http://fiddle.jshell.net/aS3h3/1/show/

Answer 6

我转到了页面http://www.kovari.cz/。如果这就是您所说的，请重新定义此规则：

#wrapper {
    margin: 0 auto;
    width: 757px !important;
}

Answer 7

<html>
<head>
<title>Center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    background: #ccc;
    text-align: center; /* hack para o IE */
}

#everything {
    width: 760px;
    margin: 0 auto;
    text-align: left; /* IE Hack */
}

#content {
    padding: 5px;
    background-color: #eee;
}
</style>
</head>
<body>
    <div id="everything">
        <div id="content">
            <h1>Center of the page</h1>
        </div>
    </div>
</body>
</html>

Answer 8

这是您的代码示例

<html>
<head>
<style>
body {
    text-align:center;
    }

#Content {
    width:600px;
    margin:0px auto; /* Right and left margin widths set to "auto" */
    border:1px dashed #333;
    background-color:#eee;
    }
</style>
</head>
<body>

<div id="Content">
centered content
</div>
</body>
</html>

Tutorial Link

CSS中心页面

8 个答案: