text not aligns to centers on @media screen and (min-width:992px) and (max-width:1199px)

Question

the heading and sub heading of a slider is not center aligned its working fine all on other screen sizes but in this screen size the heading and subheading floats to the left

 @media screen and (min-width:992px) and (max-width:1199px) {

    .position{
      position: absolute;
      padding-top: 240px;
    }
    .swiper-slide{
     text-transform: uppercase;
     letter-spacing: 3px;
     font-size: 60px;
     line-height: 79px!important;
     color: #fff;
    }
    .subtitle{
    font-family: 'Rouge Script', cursive;
    font-size: 40px;
    line-height: 39px!important;
    font-weight: 400;
    color: #fff;
    font-style: italic;
    }

 }

i'm using text-center bootstrap class for aligning the text

My HTML

 <div class="item text-center">
      <div class="position col-lg-12">
        <h1 class="swiper-slide">
          <strong>
            welcome to the shop
          </strong>
        </h1>
        <p class="subtitle">
          <span>
            Take your time looking around & don't be shy
          </span>
        </p>
        <p class="top-space">
          <button type="button" class="btn btn-default btn-lg button hvr-float-shadow" id="focus">
            START BROWSING
          </button>
        </p>
      </div>
      <img src="img/front_girl1.jpg">
    </div>

Answer 1

Use text-align:center; will align text in center .

check below code

  .swiper-slide{
    text-align: center;
    }

    .subtitle{
    text-align: center;
        }

Answer 2

this is cause the issue :

.position{
      position: absolute;
      padding-top: 240px;
    }

remove absolute position and it will work properly

LIVE DEMO

Answer 3

It should work regardless of the positioning context. You should check specificity and display type(if element set to display:inline than text align will not apply directly to that element). Hard to say without live demo. Can you provide more code or a complete fiddle ?