Question

如何在屏幕中间放置网页？喜欢stackoverflow网站上的页面？我正在编写我的网站的母版页，我想使用HTML和css将母版页放在屏幕中间，然后使用css构建内部定位块。但我不能让我的页面在中间可视化！

谢谢！

Answer 1

您可以使用边距将其水平放置在中央。

鉴于此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才能使其正常工作。

Answer 2

在<div>中创建一个<body>，如下所示：

<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. */
}

Answer 3

将所有内容放入容器中并为其设置保证金：0 auto

Answer 4

<div style="width: 800px; margin: 0px auto;">
  your content here
</div>

如果您想要水平和垂直对齐，请检查此页面：http://www.wpdfd.com/editorial/thebox/deadcentre2.html

Answer 5

将它全部包含在带有margin的div中：auto并使body具有text-align：center。

Answer 6

让HTML代码如下：

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

以下是CSS代码：

.box{
    width: 200px;
    margin: 10px auto;
}

上面的CSS代码会将div的宽度设置为200px，并将从底部设置为10px，从左到右设置为auto，这意味着它会自动将其位置调整为居中。 auto保证左右边距将设置为相同的大小。

Answer 7

这很简单：显示：内联阻止;

<div style="text-align: center; display: inline-block; width: specifyYourWidthHere">
    <div>
          //Your TextBox here
    </div>
</div>

Answer 8

您可以尝试：

<center>

这是更符合30个字符的文字。

如何在屏幕中间放置网页？

8 个答案: