ミドル/センタボックスをスライダのテキストで整列させるにはどうすればモバイルビューで反応するのですか？

Question

私はブートストラップとウェブデザインで新しくなっています.iモバイル対応のスライダーを作成したいのですが、スライダーの中央にあるテキストをボックスの中に揃えたいと思っています。私は解決するために手伝ってください。私はどのように反応することができますか？

i made align center in desktop view but in mobile view or responsive it won't happen. 

Please Note: i am using bx slider here. (screenshot attached) 
Here is my code: 

    <header> 
     <div class="slider"> 
      <ul class="bxslider"> 
       <li><img src="images/slider.jpg" class="slide-img img-responsive"/> 
        <div class="cap-box"> 
         <p class="cap1">AIRFRESHENER</p> 
         <p class="cap2">OUR PRODUCT IS GOOD</p> 
        </div> 

       </li> 

       <li><img src="images/slider.jpg" class="slide-img img-responsive"/> 
        <div class="cap-box"> 
         <p class="cap1">AIRFRESHENER</p> 
         <p class="cap2">OUR PRODUCT IS GOOD</p> 
        </div> 
       </li> 

       <li><img src="images/slider.jpg" class="slide-img img-responsive"/> 
        <div class="cap-box"> 
         <p class="cap1">AIRFRESHENER</p> 
         <p class="cap2">OUR PRODUCT IS GOOD</p> 
        </div> 
       </li> 

      </ul> 
     </div> 

CSS file: 

.slide-img 
{ 
    width: 100%; 
    /*height: 700px;*/ 
} 
.bx-wrapper .bx-viewport 
{ 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    box-shadow: none; 
} 
.bx-viewport { 
    position: static!important; /* center to page correctly */ 
    border: 0!important; /* border */ 
    -webkit-box-shadow: none!important; /* these two shadows */ 
    box-shadow: none!important; 
} 
.cap-box { 
    position: absolute; 
    margin-left:25%; 
    background: rgba(0,0,0,0.5); 
    top: 35%; 
    width:660px; 
    height: 180px; 
    display: block; 
    padding: 50px 0px; 
} 
.cap1 
{ 
    font-family: Roboto, Serif; 
    font-weight: 700; 
    font-size: 36px; 
    color: #ea6153; 
    text-indent: 65px; 
} 
.cap2 
{ 
    font-family: Roboto, serif; 
    font-weight: 700; 
    font-size: 48px; 
    text-align: center; 
    color: #ffffff; 
    line-height: 13px; 
} 

[![This Screenshot is my desktop view][1]][1] 
[![This is my Mobile view which is not responsive with slider(Airfreshener our product is good)][2]][2] 


    [1]: https://i.stack.imgur.com/HpK0Y.jpg 
    [2]: https://i.stack.imgur.com/HR4CH.png 

Answer 1

これらを確認し、必要に応じて値を指定して再生します。変更はCSSでしかありません。

 

    .slide-img { 
     width: 100%; 
    } 

    .bxslider li { 
     position: relative; 
    } 

    .cap-box { 
     position: absolute; 
     left: 50%; 
     top: 50%; 
     transform: translate(-50%, -50%); 
     padding: 50px; 
     width: 80%; 
     height: 30%; 
     background: rgba(0, 0, 0, 0.5); 
    } 

    .cap1 { 
     font-family: Roboto, Serif; 
     font-weight: 700; 
     font-size: 3.5vw; 
     line-height: 0.5; 
     color: #ea6153; 
     text-indent: 20px; 
    } 

    .cap2 { 
     font-family: Roboto, serif; 
     font-weight: 700; 
     font-size: 4.5vw; 
     line-height: 1; 
     color: #ffffff; 
    }