【发布时间】：2014-01-17 17:21:51
【问题描述】：
我试图在另一个 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;
}
并给子 div 中间的垂直对齐：
.aub-img,
.aub-main,
.aub-contact-links {
display: inline-block;
vertical-align: middle;
}
但是我试图使这项工作不起作用！谁能告诉我哪里出错了？ (JSFiddle)。
=====================
编辑：
这是我的布局，不是垂直居中的！
【问题讨论】：
-
我很难确定为什么，但你的前元素没有高度。添加边框时更容易发现：jsfiddle.net/aCv9e/10
-
嗯，你说得对，很奇怪！当我为其添加特定高度时，一切都居中。
-
每当你使用百分比高度时，你必须问自己“到底是什么百分比？”在这种情况下，您尝试使用没有设置高度的盒子的百分比，只有最小高度。这在 CSS 中不起作用。盒子必须在容器上明确设置高度才能使用百分比高度
-
啊啊啊啊！谢谢Alochi，这很清楚。当我向 .author-page-box 添加显式高度时，它会居中。我很惊讶 100% 没有考虑容器的最小高度。
-
@cimmanon - CSS 2.1 spec 表示对于百分比高度“如果包含块的高度没有明确指定（即，它取决于内容高度），并且这个元素不是绝对定位的，值计算为'auto'。”即，如果父元素的高度“只是隐含的”，那么该高度的百分比将不起作用。