简单的横幅滑块与文本对齐x =中心y =中心，不起作用

Question

我希望创建带有革命的滑块verson jquery一个滑块，在这个滑块中我想比较横幅与测试+背景文字颜色：

如果您发现文字没有垂直居中对齐

但我不明白，因为在平板电脑和Mozilla中视图很好（文本是整数x =中心，y =中心），而在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;
}

如何获得适用于所有浏览器的唯一代码，以便在黑框中对齐文本？

如此图所示

Answer 1

1. 首先移除高度。因为旋转滑块会使你的div高度。

2. 通过填充修正你的身高。

3. 无需使用溢出隐藏。

4. 无需文本对齐中心。

.tp-caption.modern_small_text_dark{ border: none; font: normal 53px/1 "font-one", Times, serif; padding: 40px 20px; color: rgba(255,255,255,1); 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) ; }