중간/가운데 상자를 모바일보기에서 반응 형 슬라이더의 텍스트로 정렬하는 방법 ??

Question

저는 부트 스트랩과 웹 디자인에서 새롭습니다. 슬라이더 중간에있는 상자에 텍스트를 정렬하고 반응 형에서도 일어나는 모바일 반응 형 슬라이더를 만들고 싶습니다. 그래서 내가 해결하도록 도와주세요. 어떻게하면 반응이 좋을까요 ??

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