Adjusting title on grid layout which is developed using bootstrap flexbox

This is the original image with grids and correct titles. I want my titles and subtitles also come like this image is having.This is my output where images are aligned correctly but the titles on each image is not able to set to center. Both title and sub title together not coming to center although I’m using text-align: center style.

.tile {
  /* TODO: MODULE_CARDS */
  /* 1. Fill in the required properties. */
  margin-top: 15px;
  margin-bottom: 15px;
}
.tile img {
  /* TODO: MODULE_CARDS */
  /* 1. Fill in the required properties. */
  border: none !important;
  border-radius: 25px !important;
  max-width: 100%;
  height: 50vh !important;
}
.title {
  color: white;
  position: absolute;
  bottom: 10vh;
  z-index: 7;
  left: 35%
  /* text-align: center; */
}
.sub-title{
  color: white;
  position: absolute;
  bottom: 6vh;
  z-index: 7;
  left: 35%
}

above is my css code and below is my html code.

<div class="container">
        <!-- TODO: MODULE_LAYOUT -->
        <!-- 1. Create the grid like layout as required. -->
    
        <div class="row">
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">BENGALURU</span>
              <span class="sub-title">100+ PLACES</span>
              <img src="assets/bengaluru.jpg" alt="bengaluru"
                    class="tile img">
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">KOLKATA</span>
              <span class="sub-title">52+ PLACES</span>
              <img src="assets/kolkata.jpg" alt="kolkata"
                    class="tile img">
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">GOA</span>
              <span class="sub-title">160+ PLACES</span>
              <img src="assets/goa.jpg" alt="goa"
                    class="tile img">
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">MUMBAI</span>
              <span class="sub-title">121+ PLACES</span>
              <img src="assets/mumbai.jpg" alt="mumbai"
                    class="tile img">
            </div>
    
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">SINGAPORE</span>
              <span class="sub-title">89+ PLACES</span>
              <img src="assets/singapore.jpg" alt="singapore"
                    class="tile img">
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">DUBAI</span>
              <span class="sub-title">74+ PLACES</span>
              <img src="assets/dubai.jpg" alt="dubai"
                    class="tile img">
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">MALAYSIA</span>
              <span class="sub-title">172+ PLACES</span>
              <img src="assets/malaysia.jpg" alt="malaysia"
                    class="tile img">
            </div>
            <div class="col-lg-3 col-md-4 col-xs-6 tile">
              <span class="title">PARIS</span>
              <span class="sub-title">150+ PLACES</span>
              <img src="assets/paris.jpg" alt="paris"
                    class="tile img">
            </div>
        </div>
    </div>

Could you please help me with aligning the title and sub title text to center.