设置了 vertical-align:middle 依然无法垂直居中

最近遇到行内子元素垂直居中的需求，按照以往经验设置了子元素 vertical:middle 以及 display:inline-block，但是发现并没有效果。 几经周转查询了 vertical-align 的具体用法，发现主要是因为没有基线对照参照物，所以没有生效。

因此想到添加一个高度 100% 的空的行内元素，并且同时设置 vertical:middle 作为子元素的参照物。

child

信息

为了不添加空标签而污染 html 代码我们可以为父元素添加一个 before 伪类作为相对参照物。

.parent {
  width: 200px;
  height: 200px;
  text-align: center;
  border: 1px solid #ccc;
}

.parent::before {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: '';
}

.parent .child {
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
}