Html 如何让主 div 容器对齐到中心？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2279519/
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 to get main div container to align to centre?
提问by Amra
I have always been wondering how other people get to align to the centre the main div container as the only way I manage so far is adding to the css file the following:
我一直想知道其他人如何将主 div 容器与中心对齐，因为到目前为止我管理的唯一方法是将以下内容添加到 css 文件中：
*{
padding:auto;
margin:auto;
text-align:centre;
}
I have seen other pages using: *{padding:0px;margin:0px}but I can't see where or what do they do to centralise the main container.
我已经看到其他页面使用：*{padding:0px;margin:0px}但我看不到它们在何处或如何集中主容器。
Could anybody explain how?
有人能解释一下怎么做吗？
Code example:
代码示例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<title>This is the main container</title>
<style type="text/css">
*{
padding:auto;
margin:auto;
text-align:center;
}
</style>
</head>
<body>
<div style="width:400px;background-color:#66FFFF;display:block;height:400px;">
<b>This is the main container.</b>
</div>
</body>
</html>
Could anybody explain how do they do it in the following page?
有人可以在下一页解释他们是如何做到的吗？
回答by Tatu Ulmanen
Do not use the *selector as that will apply to all elements on the page. Suppose you have a structure like this:
不要使用*选择器，因为它适用于页面上的所有元素。假设你有一个这样的结构：
...
<body>
<div id="content">
<b>This is the main container.</b>
</div>
</body>
</html>
You can then center the #contentdiv using:
然后，您可以#content使用以下方法将div居中：
#content {
width: 400px;
margin: 0 auto;
background-color: #66ffff;
}
Don't know what you've seen elsewhere but this is the way to go. The * { margin: 0; padding: 0; }snippet you've seen is for resetting browser's default definitions for all browsers to make your site behave similarly on all browsers, this has nothing to do with centering the main container.
不知道你在别处看到了什么，但这是要走的路。* { margin: 0; padding: 0; }您看到的代码段用于为所有浏览器重置浏览器的默认定义，以使您的网站在所有浏览器上的行为都相似，这与将主容器居中无关。
Most browsers apply a default margin and padding to some elements which usually isn't consistent with other browsers' implementations. This is why it is often considered smart to use this kind of 'resetting'. The reset snippet you presented is the most simplest of reset stylesheets, you can read more about the subject here:
大多数浏览器对某些元素应用默认边距和填充，这通常与其他浏览器的实现不一致。这就是为什么使用这种“重置”通常被认为是明智的。您提供的重置片段是最简单的重置样式表，您可以在此处阅读有关该主题的更多信息：
回答by Kids Formal
The basic principle of centering a page is to have a body CSS and main_container CSS. It should look something like this:
页面居中的基本原则是拥有一个 body CSS 和 main_container CSS。它应该是这样的：
body {
margin: 0;
padding: 0;
text-align: center;
}
#main_container {
margin: 0 auto;
text-align: left;
}
回答by Megan
You can text-align: center the body to center the container. Then text-align: left the container to get all the text, etc. to align left.
您可以 text-align: center body 使容器居中。然后 text-align: left the container 得到所有的文本，等等左对齐。
回答by Juraj Blahunka
I would omit the * { text-align:center }declaration, as it sets center alignment for all elements.
我会省略* { text-align:center }声明，因为它为所有元素设置中心对齐。
Usually with a fixed width containermargin: 0 autoshould be enough
通常用一个固定宽度的容器margin: 0 auto应该就够了
