使用平移百分比垂直居中元素

Question

我正在尝试使用平移百分比垂直定位元素，这样我就可以轻松地为它们设置动画。在下面的示例中，无论y值如何，百分比都不会移动我的元素。

http://jsfiddle.net/DUdzC/3/

<div id="experiment-slide-display">
    <div id="slide">
            <div class="experiment"><div class="experiment-title">abstraction layer</div></div>
    </div>
</div>

css：

html{width:100%;height:100%; margin: 0;}
body{overflow:hidden; margin:0; width:100%; height:100%;}

#experiment-slide-display{top: 50%; left:50%; position:absolute;border:1px solid #000000;}
#slide{height:2000px; top:-1000px; position: absolute; left:0; width:20px;}
.experiment{position: relative; -webkit-transform: translate(0%,50%); -moz-transform: translate(0%,50%); transform: translate(0%,50%); }
.experiment-title{position: absolute;}

Answer 1

只需对代码进行一些调整即可实现。。。

演示：-http://jsfiddle.net/DUdzC/4/

CSS：-

#experiment-slide-display { width: 100%; height:100%; top:0; left:0; position:absolute; }
#slide { height:20px; top:50%; position: absolute; left:50%; width:200px; margin-left:-100px; margin-top:-10px; text-align:center; }
.experiment { position: relative; -webkit-transform: translate(0%,50%); -moz-transform: translate(0%,50%); transform: translate(0%,50%);  width:100%; }
.experiment-title { position: absolute; top:0; left:0; width:100%; }

谢谢，希望这对你有用。。。