Html 如何将网页放置在屏幕中间？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/683275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I position a web page in the middle of the screen?
提问by Uince81
How can I position a web page in the middle of the screen? like the pages on stackoverflow web site? I'm writing the masterpage of my website and I want to use HTML and css to position the master page in the middleof the screen and then build the inside positioning block using css. But I can't get my page to be visualized in the middle!
如何将网页放置在屏幕中间？喜欢 stackoverflow 网站上的页面吗？我正在编写我网站的母版页，我想使用 HTML 和 css 将母版页定位在屏幕中间，然后使用 css 构建内部定位块。但是我无法让我的页面在中间可视化！
Thank you!
谢谢！
回答by Zack The Human
You can use margins to position it in the center horizontally.
您可以使用边距将其水平放置在中心。
Given this html:
鉴于此 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>
The CSS can be as simple as:
CSS 可以很简单：
#page {
margin-left:auto;
margin-right:auto;
width:960px;
}
You also need to make sure you have a valid doctype for this to work.
你还需要确保你有一个有效的文档类型才能工作。
回答by strager
Create a <div>in your <body>like so:
创建一个<div>在你<body>像这样：
<body>
<div id="main">
<!-- ... -->
</div>
</body>
And add the following CSS:
并添加以下 CSS：
body {
text-align: center; /* IE */
}
#main {
margin-left: auto;
margin-right: auto;
text-align: left; /* IE */
width: XXX; /* Fill this out. */
}
回答by Zac
Put all of your content in a container and give it a margin: 0 auto
把你所有的内容放在一个容器中并给它一个边距：0 auto
回答by William
wrap it all in a div with margin: auto and make body have text-align: center.
将它全部包装在一个带有边距：自动的 div 中，并使正文具有文本对齐：居中。
回答by Amanshu Kataria
Let the HTML code be as follows:
让 HTML 代码如下：
<body>
<div class="box">.....</div>
</body>
And following be the CSS code:
以下是 CSS 代码：
.box{
width: 200px;
margin: 10px auto;
}
The above CSS code will set the width to 200px for the div and will set from bottom and up to 10px and the margin from left right to autothat means it will automatically adjust it's position to center. The autoguarantees that the left and right margins will be set to the same size.
上面的 CSS 代码会将 div 的宽度设置为 200px，并将设置为从底部到 10px，边距从左到右到auto这意味着它将自动将其位置调整到中心。在auto保证了左，右页边距将被设置为相同的大小。
回答by Diego Venancio
It's simple: display: inline-block;
很简单：display: inline-block;
<div style="text-align: center; display: inline-block; width: specifyYourWidthHere">
<div>
//Your TextBox here
</div>
</div>
回答by Lennart Koopmann
<div style="width: 800px; margin: 0px auto;">
your content here
</div>
Check this page if you want horizonal andvertical alignment: http://www.wpdfd.com/editorial/thebox/deadcentre2.html
如果您想要水平和垂直对齐，请检查此页面：http: //www.wpdfd.com/editorial/thebox/deadcentre2.html
回答by shsteimer
You can try:
你可以试试：
<center>
This is more text to meet the 30character minimum.
这是满足最少 30 个字符的更多文本。
