我想我终于找到了解决这个问题的答案。问题是，当孩子的大小发生变化且身高不详时，我见过的几乎所有其他解决方案都无法应对。我需要它来完成所有位置都没有固定高度的自适应％设计。
首先，使用全部％设计，您需要一个零高度的包装元素来充当父元素内的定位占位符；
<body><div > <div > <div >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%; float: left; position:relative; top: 0px; }So nothing special about that except that it has no height which makes this
general problem of centering elements tricky. It needs to be absolutely
positioned so that we can uses positioning coordinates in the child elements
(I think this may require a ‘top’ in IE).
Next, the wrapper which is absolutely positioned to exactly overlay the
parent element and fill it out completely.
.divWrapper{ position:absolute; top:0px; padding-top:50%; padding-bottom:50%; height:0px;}The padding means that any child elements will start in exactly the middle of
the parent element but this wrapper itself has no height and takes up no
space on the page.
Nothing new yet.
最后，我们要居中的子元素。这里的技巧是让子元素根据其 自身的高度
垂直向上滑动。您不能使用50％，因为那是父容器的50％，而不是我们自己的。看似简单的答案是使用变换。我不敢相信我以前没有发现这个问题。
.tx{ position: relative; background-color: transparent; text-align: center; -webkit-transform: translateY(-50%); -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")'; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand'); transform: translateY(-50%); }但是，我尚未在IE6 +上对此进行测试，因此如果有人想验证我的Matrix转换，我将不胜感激。
更新资料
事实证明，甚至不需要包装器。这就是您需要正确垂直居中的全部；
.tx{width:100%; // +1 to @RonM position: absolute; text-align: center; padding-top:100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-filter: 'progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0)'; filter: progid:DXImageTransform.Microsoft.Matrix(Dx=0,Dy=0); transform: translateY(-50%); }和更新
但仍无法在IE6中工作-查看这些转换，我认为如果没有Javascript，就无法在传统上做到这一点。
