How to align middle/center box with text in slider with responsive in mobile view ??

Question

I am new in bootstrap and web design .i want to create a slider with mobile responsive in which i want to align the text in box at middle of slider and also it happen in responsive as well. so help me to solve. How can i make responsive ??

    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.sstatic.net/HpK0Y.jpg
  [2]: https://i.sstatic.net/HR4CH.png

Answer 1

Check these and play with the values to suit your needs. Changes are there in css only.

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