logo标签列表

如何将网页置于屏幕中央？

htmlcss
9
我该如何将网页居中显示在屏幕上？就像stackoverflow网站上的页面一样？ 我正在编写我的网站主页面，想使用HTML和CSS将主页面居中显示在屏幕中央，然后再使用CSS构建内部定位块。但是我无法让我的页面在中间可视化！ 谢谢！
8个回答
18
你可以使用边距将其水平居中定位。
给定以下HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head></head>
  <body>
    <div id="page"> ... content ... </div>
  </body>
</html>

CSS可以非常简单：

#page {
  margin-left:auto;
  margin-right:auto;
  width:960px;
}

您还需要确保您有一个有效的文档类型声明（doctype），这样才能使它起作用。

只需要使用一个有效的文档类型，IE浏览器就能正确理解它。然而，我认为IE6不支持自动边距。 - strager
我相信如果存在有效的文档类型，IE6可以理解自动边距。至少在版本6.0.2900.2180.xpsp_xp2_gdr.080814-1233中是这样的。哇，这真是一大堆话。 - Zack The Human
@strager：可以，但是你需要使用一些 CSS 技巧，在父元素（在这种情况下为 body）上设置 text-align:center，然后在要居中的元素上将其恢复为 text-align:left。 - Joel Coehoorn
@Zack - 自动边距在我使用的两个不同版本的IE6中都有效（恐怕我手头没有这些版本）。 - Russ Cam
@Coehoorn，这并不能使自动边距工作。这是一种利用IE对text-align的理解缺陷的解决方法。 - strager
6
在您的 <body> 中创建一个 <div>，如下所示：
<body>
<div id="main">

<!-- ... -->

</div>
</body>

并添加以下CSS：

body {
    text-align: center; /* IE */
}

#main {
    margin-left: auto;
    margin-right: auto;
    text-align: left;   /* IE */
    width: XXX;         /* Fill this out. */
}
2
将所有内容放在一个容器中，并为其设置margin: 0 auto。该容器可以使内容居中显示。
0

让HTML代码如下：

<body>
  <div class="box">.....</div>
</body>

以下是 CSS 代码：
.box{
    width: 200px;
    margin: 10px auto;
}

上述CSS代码将为div设置宽度为200px，并从底部和顶部设置为10px，左右边距设置为auto，这意味着它将自动调整其位置以居中。 auto保证左右边距将设置为相同的大小。
0
很简单：display: inline-block;
<div style="text-align: center; display: inline-block; width: specifyYourWidthHere">
    <div>
          //Your TextBox here
    </div>
</div>
0
0
将所有内容用 div 包裹，并设置 margin: auto，同时让 body 具有 text-align: center 样式。
-1

你可以尝试：

<center>

这是更多的文本，以满足30个字符的最小要求。

尽管这个答案听起来有些俗套，但我还没有见过一个它不能完美运行的浏览器。 - Eric Petroelje
我想我没有仔细读题，我几乎在我的答案中加了一句说这不是最优雅的解决方法，或者是一个 CSS 的解决方案。话虽如此，它会起作用。 - shsteimer
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接