css，当你垂直居中内联 block 元素时

Question

我正在尝试将 inline-block 垂直和水平居中。

我阅读了有关幽灵元素技巧的文章。

为了放置ghost-element，我使用了psue-do class 和height:100%;

虽然试过了，但我认为它并不完美。

有点偏右!并给它一个负边距 以使其完美居中。

我想如果你给它

margin-left:-5.5px;

完成了!!

现在，我很好奇 -5.5px 来自哪里或者如果我错了，请纠正我

谢谢

Answer 1

你可以引用这个

* {
  box-sizing: border-box;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}

html,
body {
  height: 100%;
  padding: 16px;
}

.container {

  text-align: center;
  font-size: 0;
  border: 1px solid #333;
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
}

.centered {
  display: inline-block;
  vertical-align: middle;
  font-size: initial;
  padding: 8px;
  background-color: #FF5252;
  color: #fff;
}

<div class="container">
  <div class="centered">
    I am centered
  </div>
</div>