为什么这个垂直居中技巧不起作用？

Question

我试图将三个div垂直居中于另一个div中。我尝试使用技术described here on CSS Tricks和demonstrated here：在容器之前添加一个伪元素：

.author-page-box:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em;
}

并给孩子divs垂直对齐中间：

.aub-img,
.aub-main,
.aub-contact-links {
  display: inline-block;
  vertical-align: middle;
}

但我尝试做这项工作并不奏效！谁能告诉我哪里出错？ （JSFiddle）。

====================

编辑：

这是我的布局看起来的样子，而不是垂直居中的！

Answer 1

这样的东西？ Vertically Centered Example

你有正确的想法，但正在添加

vertical-align: middle;

错误的div。