Не могу реализовать центрирование по вертикали относительно картинки выходящей из потока

Не могу реализовать центрирование по вертикали относительно картинки выходящей из потока. Есть дизайн

В данном дизайне блок слева стоит в контейнере => блок с каруселью(картинкой) расположен справа и занимает 50% ширины экрана. Мне нужно позиционировать текст относительно картинки в центре по вертикали, блок в котором это всё находится при уменьшении разрешения должен быть высотой с картинку. Мои попытки HTML:

<div class="container-fluid relative" style="background-color: #F2F2F2;">
        <div class="row" id="v-pills-tab-row">
            <div class="container">
                <div class="row line">
                    <div class="col-lg-6">
                            <div class="row no-gutters">
                                <div class="col-lg-10 nav flex-column" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                                    <p>Наши решения</p>
                                    <a class="tab-link active" id="v-pills-lumon-tab" data-toggle="pill" href="#v-pills-lumon" role="tab" aria-controls="v-pills-lumon" aria-selected="true">Безрамное остекление Lumon</a>
                                    <a class="tab-link" id="v-pills-aluminium-tab" data-toggle="pill" href="#v-pills-aluminium" role="tab" aria-controls="v-pills-aluminium" aria-selected="false">Алюминиевые системы Schüko</a>
                                    <a class="tab-link" id="v-pills-wood-tab" data-toggle="pill" href="#v-pills-wood" role="tab" aria-controls="v-pills-messages" aria-selected="false">Дерево-алюминиевые оконные блоки</a>
                                    <a class="tab-link" id="v-pills-glass-tab" data-toggle="pill" href="#v-pills-glass" role="tab" aria-controls="v-pills-settings" aria-selected="false">Цельно-стеклянные конструкции</a>
                                </div>
                            </div>
                    </div>
                    <div class="col-lg-6 line relative">
                        <div class="content-box" id="myTabContent">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade show active" id="v-pills-lumon" role="tabpanel" aria-labelledby="v-pills-aluminium-tab">
                                    <div class="carousel-inner">
                                        <div id="carouselFirst" class="carousel slide" data-ride="carousel">
                                            <div class="carousel-item active">
                                                <img class="d-block w-100" src="http://bb1.apollo-digital.ru/assets/img/carousel/lumon-slide-1.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="http://bb1.apollo-digital.ru/assets/img/carousel/lumon-slide-2.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="http://bb1.apollo-digital.ru/assets/img/carousel/lumon-slide-1.jpg" alt="First slide">
                                            </div>
                                        </div>
                                        <a class="carousel-control-prev" href="#carouselFirst" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Назад</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselFirst" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Вперёд</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-aluminium" role="tabpanel" aria-labelledby="v-pills-aluminium-tab">
                                    <div id="carouselSecond" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner">
                                            <div class="carousel-item active">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-1.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-2.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-3.jpg" alt="First slide">
                                            </div>
                                        </div>
                                        <a class="carousel-control-prev" href="#carouselSecond" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Назад</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselSecond" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Вперёд</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-wood" role="tabpanel" aria-labelledby="v-pills-wood-tab">
                                    <div id="carouselThird" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner">
                                            <div class="carousel-item active">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-1.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-2.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-3.jpg" alt="First slide">
                                            </div>
                                        </div>
                                        <a class="carousel-control-prev" href="#carouselThird" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Назад</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselThird" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Вперёд</span>
                                        </a>
                                    </div>
                                </div>
                                <div class="tab-pane fade" id="v-pills-glass" role="tabpanel" aria-labelledby="v-pills-glass-tab">
                                    <div id="carouselFourth" class="carousel slide" data-ride="carousel">
                                        <div class="carousel-inner">
                                            <div class="carousel-item active">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-1.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-2.jpg" alt="First slide">
                                            </div>
                                            <div class="carousel-item">
                                                <img class="d-block w-100" src="/assets/img/carousel/alum-slide-3.jpg" alt="First slide">
                                            </div>
                                        </div>
                                        <a class="carousel-control-prev" href="#carouselFourth" role="button" data-slide="prev">
                                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Назад</span>
                                        </a>
                                        <a class="carousel-control-next" href="#carouselFourth" role="button" data-slide="next">
                                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                            <span class="sr-only">Вперёд</span>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Css

    .content-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc( 100vw / 2  - 20px );
  float: right;
}

.content-box {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: calc( 100vw / 2 - 20px );
  float: right;
}
.content-box-1{
  //margin-right: -20px;
  float: right;
}
#v-pills-tab a{
  font-weight: bold;
  font-size: 20px;
  line-height: 23px;
  margin-top: 36px;
  text-transform: uppercase;
  color: #333333;
}
#v-pills-tab p{
  font-family: Georgia,Times,Times New Roman,serif;
  font-weight: normal;
  font-size: 60px;
  line-height: 68px;
  margin-bottom: 35px;
}
#v-pills-tab .tab-link:nth-child(2){
}
.tab-link:nth-child(2):after,.tab-link:nth-child(3):after,.tab-link:nth-child(4):after{
  margin-top: 33px;
  content: " ";
  width: 100%;
  height: 1px;
  background-color: black;
  display: block;
}

.row.line > [class*="col-"]:first-child {
  padding-left: 0;
}
.row.line > [class*="col-"]:last-child {
  padding-right: 0;
}

https://codepen.io/Sclif/pen/YzXJBQw Всё это нужно реализовать в контексте bootstrap4(если возможно)