простой баннер слайдер с текстом Align х = центр у = центра, не работает

Question

я хочу создать с помощью вращения ползунка Verson JQuery слайдер, в этом слайдер я хочу сравнить баннер с тестовым + фон цвет текста:

, если вы заметили, что текст не выровнен по центру вертикально

, но я не understant потому, что в планшете и Mozilla вид хорошо (текст allineate х = центр, у = центр), в то время как на хроме и сафари не видят, что они выстроились в линию.

Я проверяю также изменение css, но результат является обратным хорошим с сафари и хром и плохо с 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 но плохо для хрома

@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 (с этим хорошо на хроме, но плохо в сафари)

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