使用翻译百分比垂直居中元素 [英] Vertically centering elements using translate percentages

问题描述

我试图使用翻译百分比垂直放置元素，所以我可以很容易地动画。在下面的例子中，百分比甚至不移动我的元素，不管y值。

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

 < div id =experiment-slide-display> 
 
< div id =slide> 
 
< div class =experiment>< div class =experiment-title>抽象层< / div>< / div> 
< / div> 
 
< / div> 
  

css：

 code> html {width：100％; height：100％; margin：0;} 
 body {overflow：hidden; margin：0; width：100％; height：100％;} 
 
 
＃experiment-slide-display {top：50％;左：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;} 
  

解决方案>

只需对您的代码进行一些调整，并使其发生...

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

CSS： -

 ＃experiment-slide-display {width：100％;高度：100％; top：0; left：0;位置：绝对; } 
 #slide {height：20px; top：50％; position：absolute;左：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％; } 
  

感谢希望这适用于您...

I'm trying to vertically position elements using translate percentages so I can easily animate them. In the following example the percentage doesn't even move my element regardless of the y value.

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;}

解决方案

Just make some adjustment to your code and make it happen...

Demo:- 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%; }

Thanks hope this works for you...

这篇关于使用翻译百分比垂直居中元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！