Question

我一直想知道为什么我可以对左边/右边使用margin auto来使div水平居中，而对于垂直居中却不能。在这里，我希望垂直居中： div-block-vertical-line ，但是margin-top和margin-bottom无效。

.div-block-container {
  width: 2%;
  height: 300px;
  background: red;
}

.div-block-vertical-line {
  display: block;
  width: 2px;
  height: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  background: blue;
}

<div class="div-block-container">
  <div class="div-block-vertical-line"></div>
</div>

Answer 1

如果您选中the documentation：

自动

浏览器选择合适的边距使用。例如，在   在某些情况下，该值可用于使元素居中。

因此，如果您使用0，则浏览器只需选择auto作为上/下边距。

您要查找的内容在flexbox model中定义：

弹性项目上的自动边距效果与自动边距非常相似   处于阻塞状态：

在计算弹性基数和弹性长度时，自动边距   被视为0。

在通过对齐内容和align-self进行对齐之前，任何肯定的   可用空间在该维度上分配给自动页边距。

溢出框会忽略其自动边距并最终溢出   方向

.div-block-container {
  width: 2%;
  height: 300px;
  background: red;
  display:flex;
}

.div-block-vertical-line {
  display: block;
  width: 2px;
  height: 90%;
  margin-right: auto;
  margin-left: auto;
  margin-top: auto;
  margin-bottom: auto;
  background: blue;
}

<div class="div-block-container">
  <div class="div-block-vertical-line"></div>
</div>

因此，为什么没有特殊原因。像这样简单地定义它，后来在引入flexbox时对其进行了增强。

为什么margin自动适用于左/右，而不适用于顶部/底部？

1 个答案: