我想我终于找到了解决问题的方法。问题是我见过的几乎所有其他解决方案都无法应对当孩子大小发生变化并且不知道任何高度时。我需要它来实现响应式所有 % 设计，其中任何地方都没有固定的高度。
我偶然发现了这个 SO 答案使用 CSS 3 垂直对齐，这是我的灵感。
首先，使用全 % 设计，您需要一个零高度的包装元素作为父元素内的定位占位符；
<body>
<div class="container">
<div class="divWrapper">
<div class="tx">This text will center align no matter how many lines there are</div>
</div>
</div>
</body>
在这种情况下，我的容器是一个简单的方块图块；
.container
{
margin:2%;
background-color:#888888;
width:30%;
padding-bottom:30%; /* relative size and position on page */
float: left;
position:relative; /* coord system stop */
top: 0px; /* IE? */
}
所以没有什么特别的，除了它没有高度，这使得元素居中这个普遍问题变得棘手。它需要绝对定位，以便我们可以在子元素中使用定位坐标（我认为这可能需要 IE 中的“顶部”）。
接下来，绝对定位的包装器完全覆盖父元素并完全填充它。
.divWrapper
{
position:absolute;
top:0px;
padding-top:50%; /* center the top of child elements vetically */
padding-bottom:50%;
height:0px;
}
填充意味着任何子元素都将从父元素的正中间开始，但是这个包装器本身没有高度并且不占用页面上的空间。
还没有什么新东西。
最后，我们要居中的子元素。这里的技巧是让子元素根据它自己的高度垂直向上滑动。你不能使用 50%，因为那是父容器的 50%，而不是我们自己。看似简单的答案是使用转换。我不敢相信我以前没有发现这一点；
.tx
{
position: relative;
background-color: transparent;
text-align: center; /* horizontal centering */
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod="auto expand")'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); /*IE6, IE7*/
transform: translateY(-50%);
}
这是小提琴
但是，我还没有在 IE6+ 上测试过这个，所以如果有人想验证我的矩阵转换，我会很感激的。
更新
事实证明，甚至不需要包装器。这就是正确垂直居中所需的全部内容；
.tx
{
width:100%; // +1 to @RonM
position: absolute;
text-align: center;
padding-top:100%;
-webkit-transform: translateY(-50%); /* child now centers itself relative to the midline based on own contents */
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; /*IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); /*IE6, IE7*/
transform: translateY(-50%);
}
但仍然不能在 IE6 中工作 - 看看这些转换，我认为没有 JavaScript 就无法为那个遗留物做到这一点。
