我想用革命滑块版本 jquery 创建一个滑块，在这个滑块中我想将横幅与测试+背景文本颜色进行比较：
如果您注意到文本没有垂直居中对齐
但我不明白，因为在平板电脑和 mozilla 中，视图很好（文本是 allineate x=center，y=center），而在 chrome 和 safari 上看不到它们排列。
我也测试了更改css，但结果与safari和chrome相反，而与mozilla相反。
这是一个简单的滑块代码
<ul>
<li data-transition="turnoff" data-slotamount="1" data-masterspeed="600"><img alt="lightsplash24" src="{{media url="wysiwyg/trego/homepage_slider/slider5/dummy.png"}}" data-lazyload="{{media url="wysiwyg/AA-lecolart-slider-last.jpg"}}" />
<div class="tp-caption modern_small_text_dark randomrotate" data-speed="600" data-x="center" data-y="center" data-start="1400" data-easing="easeOutExpo">
<div class="morius">THIS IS A TEXT OF BANNER</div>
</div>
</li>
<ul>
1）我在这个css之前使用过（有了这个，结果对mozialla有好处，但对chrome不利
@font-face {
font-family: font-one;
src: url(../fonts/Bellerose.ttf); /* check this */
}
.tp-caption.modern_small_text_dark{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 130px;
overflow: hidden;
border: none;
font: normal 53px/1 "font-one", Times, serif;
padding: 20px;
color: rgba(255,255,255,1);
text-align: center;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: #111111;
-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.3) ;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2) ;
vertical-align: middle;}
2）我也使用了这个 css（这在 chrome 上很好，但在 safari 上很糟糕）
@font-face {
font-family: font-one;
src: url(../fonts/Bellerose.ttf); /* check this */
}
.morius {
font-family: font-one;
position: relative;
top: 50%;
transform: translateY(-50%);
background: black;
font-size: 53px!important;
height: 100px;
line-height: 120%;
padding-bottom: 15px;
}
如何获得适用于所有浏览器的唯一代码以在黑色框中对齐文本？
如图所示
