Html 使用 css 将网页内容居中的最佳方法是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2017809/
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
What is the best way to center a webpage's content using css?
提问by Lawrence Barsanti
I have seen several methods for creating simple fixed width single column layout using CSS. I like the one shown herebecause there is very little code involved and it works on every browser I have tried.
我已经看到了几种使用 CSS 创建简单的固定宽度单列布局的方法。我喜欢这里显示的那个，因为涉及的代码很少，而且它适用于我尝试过的每个浏览器。
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}
<body>
<div id="container">
...entire layout goes here...
</div>
</body>
The author mentioned that he received some criticism. I not a web developer so I wanted to ask the community what they thought about this approach. More specifically is there a better/more compatible way to accomplish this?
作者提到他受到了一些批评。我不是网络开发人员，所以我想问问社区他们对这种方法的看法。更具体地说，是否有更好/更兼容的方法来实现这一点？
回答by James Maroney
The "margin: 0 auto" is the best way to do it, you just have to be sure to have the right doctype for it to work. I always use XHTML strict - others will work too. If you don't have a good doctype, the content won't center in IE6
“margin: 0 auto”是最好的方法，你只需要确保有正确的文档类型才能工作。我总是严格使用 XHTML - 其他人也可以使用。如果您没有好的文档类型，内容将不会在 IE6 中居中
To implement the XHTML strict doctype, put this above your node, as the first line in the page:
要实现 XHTML 严格的文档类型，请将其放在节点上方，作为页面中的第一行：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
回答by Crast
margin: 0 auto;( or margin-left: auto; margin-right: auto;) is really the simplest way., and there's really no issue with sticking with it for centering content.
margin: 0 auto;( 或margin-left: auto; margin-right: auto;) 确实是最简单的方法。并且坚持使用它来居中内容确实没有问题。
I'm of the opinion that the width tag should be max-width: xxxpx. For those on mobile browsers with a tiny 360px or smaller width, they will simply get the biggest possible size for your container that fits in their screen size (but then your inside layout will have to scale gracefully too.) Also of note is that max-widthdoes not work on IE6.
我认为宽度标签应该是max-width: xxxpx. 对于那些在移动浏览器与一个小640x360像素或更小的宽度，他们会简单地得到最大可能的大小为您的容器，在他们的屏幕大小合适（但随后你的内部布局则要轻松扩充了。）另外值得注意的是，max-width不不适用于 IE6。
回答by calvinlough
The approach that you have outlined is the one that I use. I have been using it for several years and it hasn't let me down. I can't think of what the criticisms would be.
您概述的方法是我使用的方法。我已经使用它好几年了，它并没有让我失望。我想不出会有什么批评。
回答by AUSteve
margin: 0 auto;is the best method for centering.
margin: 0 auto;是居中的最佳方法。
The author of article you reference stated that text-align: center;was required to support IE5/Win. I think you can safely ignore this as IE5 is well and truely dead.
您引用的文章作者指出，text-align: center;支持 IE5/Win 是必需的。我认为您可以放心地忽略这一点，因为 IE5 已经死了。
回答by Joberror
I think this is a better work around.
我认为这是一个更好的解决方法。
This will center an entire page's contentwhen contained within the div id="pagebox"of 600px wide.
当包含在600px 宽度内时，这将使整个页面的内容居中div id="pagebox"。
body { text-align:center; min-width:600px; }
#pagebox { text-align:left; width:600px; margin-left:auto; margin-right:auto; }
Comments
注释
Specify a min-widthfor the bodyas wide as the pageboxelement itself.
This prevents negative (i.e inaccesible) left margins in narrow browser windows when using Navigator 6+/ Mozilla on Windows.
指定min-width为body一样宽的pagebox元素本身。
当在 Windows 上使用 Navigator 6+/ Mozilla 时，这可以防止在狭窄的浏览器窗口中出现负的（即无法访问的）左边距。
MSIE 5 doesn't center based on autoleft/right margins, but "text-align:center"does center top divs.
MSIE 5 不是基于auto左/右边距"text-align:center"居中，而是居中顶部 div。
Hope it helps
希望能帮助到你
回答by Tom
The best way to do this is indeed creating a div, say, 960px wide and giving it {margin: 0 auto;}.
最好的方法确实是创建一个 div，比如 960px 宽并给它 {margin: 0 auto;}。
What I also like to do is to give that div some {padding: 0 15px;}. This way the centered area is actually 990px which is still perfectly center-aligned in 1024x768 monitors whilst the padding provides a cushion in the edges for users using smaller monitors or Google Chrome.
我还喜欢做的是给那个 div 一些 {padding: 0 15px;}。这样，居中区域实际上是 990 像素，在 1024x768 显示器中仍然完美地居中对齐，而填充为使用较小显示器或 Google Chrome 的用户提供了边缘缓冲。
And going a step further, I actually creater a wrapper div that just takes up the entire page and then center a content div inside it. This lets me take advantage of things like a footer that always sticks to the bottom of the screen regardless of content length (such as http://ryanfait.com/sticky-footer/).
更进一步，我实际上创建了一个包装 div，它只占据整个页面，然后将一个内容 div 居中放置在其中。这让我可以利用诸如页脚之类的东西，无论内容长度如何（例如http://ryanfait.com/sticky-footer/），它总是粘在屏幕底部。
回答by Trav L
I find it a common practise to use margin: 0 auto;to centerise your element.
我发现margin: 0 auto;将元素居中是一种常见的做法。
Also styling tags like <center>are deprecatedin current version (HTML 4.01).
在当前版本 (HTML 4.01) 中<center>也不推荐使用样式标签。
回答by Noon Silk
Honestly, I just use the <center>tag. It's outdated, I suppose (and you get some complaints about it, probably depending on your doctype) but it works.
老实说，我只是使用<center>标签。它已经过时了，我想（你会收到一些关于它的抱怨，可能取决于你的文档类型）但它有效。
-- Edit
- 编辑
Well, the downvotes on this are reasonably predictable, but I do hope someone can outline exactly why (outside of pedanticness) this doesn't work; because it's my understanding it works in all browsers. I could be wrong :)
好吧，对此的反对票是可以合理预测的，但我确实希望有人能准确地概述为什么（除了迂腐）这不起作用；因为这是我的理解，它适用于所有浏览器。我可能是错的:)
