css - hr 没有在没有边距的情况下居中 :0 auto

Question

我正在尝试使用 absolute 定位在 div 中垂直居中放置 hr。但是，如果我执行 top:50%，它不会显示在中心。为什么会这样？以下是它的代码。 jsfiddle .

margin: 0 auto 修复了这个问题，这让我更加困惑，因为这将 auto 设置为左​​/右页边距而不是上/下页边距。

.wrapper {
  width: 200px;
  height: 100px;
  background: blue;
  position: relative;
}

hr {
  width: 200px;
  border: 1px solid white;
  position: absolute;
  top: 50%;
}

.hr-margin-auto {
  margin: 0 auto
}

<div class="wrapper">
  <hr class="hr">
  <hr class="hr hr-margin-auto">

</div>

Answer 1

hr 元素有一个默认边距。这适用于您的第一个 hr，这就是为什么它低于您定义边距的那个。如果为两者设置 margin: 0(如下所示)，它们将出现在同一位置(垂直居中)。

此外，正如@Pete 指出的那样，您必须添加 transform: translateY(-50%); 以获得精确的垂直居中(在这种情况下只有一个像素的差异，这就是为什么之前没加过，但是如果要精确的话，是必须的)

.wrapper{
  width:200px;
  height:100px;
  background:blue;
 position: relative;
}


hr{
  width:200px;
  border:1px solid white;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;

} 

.hr-margin-auto{
  margin:0 auto;
}

<div class="wrapper">
  <hr class="hr">
  <hr class="hr hr-margin-auto">

</div>