CSS，当您垂直中心内联块元素时

Question

我正在尝试集中inline-block vertically and horizontally.

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

放置 ghost-element ，我使用 pseue-do类和 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>