Question

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.i期望从所有方面都有一个居中的盒子，但盒子模型的顶部是在身体的开头，如果我明确设置margin-top：20px，boxmodel向下移动，但为什么顶部部分不会自动对齐其他

2.i也没有得到自动值“DOES”来实现居中

如果是保证金：0自动; // 0？px，em或pt。

Answer 1

Css中的垂直对齐是一个非常有趣和痛苦的主题。这个stackoverflow queston是我见过的关于垂直对齐为何如此痛苦的最简洁的解释

关于您的第一个问题，您无法使用边距垂直对齐的原因将在下面的报价中说明。

...文档流和元素高度计算算法的性质使得无法使用边距将元素垂直居中于其父元素内。每当更改垂直边距值时，它将触发父元素高度重新计算（重排），这将反过来触发原始元素的重新中心...使其成为无限循环。

关于您的第二个问题，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

干杯！

Answer 2

首先，使用css水平居中“Div”。之后使用javascript来居中垂直。见demo on jsfiddle HTML：

<div class="center">Div content</div>

CSS：

.center {
    font-family:sans-serif;
    width:300px;
    height:300px;
    border:1px solid green;
    margin: 0 auto;
    text-align:center;
}

JS（JQuery）：

$().ready(function () {
    $(".center").css("margin-top", ($(window).height() - 300) / 2);
});

请参阅demo on jsfiddle

Answer 3

以下是CSS margin问题的另一个资源。 http://techslate.net/looking-at-css-margins/

关于保证金属性和价值自动

3 个答案: