CODE:
*{
margin:0px;
padding:0px;
}
body{
font-family:sans-serif;
width:1024px;
height:700px;
border:1px solid green;
//margin:0 auto;
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
}
1.我期望一个四边形居中的盒子，但是盒子模型的顶部在主体的开始，如果我明确设置margin-top:20px，盒子模型会向下移动，但为什么顶部不会自动对齐其他。
2.我也没有得到什么自动值“DOES”来实现居中
- 在 margin 的情况下:0 auto；//0 的单位是什么？px、em 或 pt。
最佳答案
Css 中的垂直对齐是一个既有趣又痛苦的话题。这stackoverflow queston是我所见过的关于为什么垂直对齐如此痛苦的最简洁的解释
关于您的第一个问题，您无法使用边距垂直对齐的原因在下面的引用中进行了解释。
... the nature of document flow and element height calculation algorithms make it impossible to use margins for centering an element vertically inside its parent. Whenever a vertical margin value is changed, it will trigger a parent element height re-calculation (reflow), which would in turn trigger a re-center of the original element... making it an infinite loop.
关于您的第二个问题，margin auto 通过计算子容器相对于父容器宽度的宽度来实现水平居中。然后它会做一些简单的数学运算，在子容器的左右两侧添加均匀的边距，强制水平居中。
至于第二个问题B部分，
margin: auto 和下面的一样:
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
margin-left: auto;
其中 margin: 0 auto 等同于以下内容:
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
实现垂直居中的解决方案
尽管存在限制，但您可以使用一些选项来实现垂直对齐。最简单的方法是利用表格。对于表格，其中的几个优点之一是使用 vertical-align 属性实际上表现得像您在表格内部强制执行时所期望的那样。因此，您可以执行以下操作:
<body>
<table style="width: 100%; height: 100%">
<tr>
<td>
<div id="verticallyCenteredContent" style="vertical-align: middle">
OMG it's vertically aligned
</div>
<td>
<tr>
<table>
<body>
我在此 jsfiddle 中演示了另外两种常用方法.
有用的文章，演示了实现垂直居中的许多场景和方法 - Vertical Centering with Css
干杯!
关于html - 关于 margin property 和 value auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17627201/