Как центрировать текст на слайдере по центру, что бы он не съезжал при изменении масштаба?

Question

[Николай Добрынин]

Есть слайдер :

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
  </ol>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img class="d-block w-100" src="img/mainscrin.jpg" alt="First slide">
      <div class="container slmax">
      <div class="carousel-caption d-none d-md-block">
        <div class="container slmax">
          <div class="row">
            <div class="col-md-5 text1">
              <h2>Заголовок<br>
                  Заголовок<br>
                  Заголовок</h2>
           </div>
           <div class="col-md-5 offset-md-2 text2"> 
              <p>текст текст текст текст текст текст текст <br>
                текст текст текст текст текст текст текст текст </p>
          <button class="btn pf1" type="submit">Кнопка Кнопка Кнопка </button>
          </div>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

и его css

.slmax {
    
    max-width: 1180px!important;
    padding: 0!important;
    margin: 0!important;
}
.text1 {
    padding: 0!important;
    text-align: left;
}
.text1 h2{
  font-family: "RobotoLight";
  font-size: 59px;  
}
.text2 {
    padding: 0!important;
    text-align: left;
    }
    .text2 p{
  font-family: "RobotoLight";
  font-size: 20px;  
}

.pf1 {
    width: 310px;
    height: 55px;
    font-size: 20px;
    background: #233f8a;
    color: #fff;
    border-radius: 10px;
    font-family: "RobotoLight";
}

При изменении масштаба страницы, текст съезжает вниз и влево. Можно ли как то зафиксировать его точно по центру что бы он в любом случае оставался там? И можно ли как то сделать высоту слайдера фиксированной, а не адаптивной?

Answer 1

[Stalker_RED]

left: 50%; top: 50%; - загоняем левый-верхний угол в центр.
transform: translate(-50%, -50%); - сдвигаем левее-выше, чтобы не угол был в центре, а центр блока.
jsfiddle.net/nhm2scu4/show
(попробуйте поресайзить окно)

Comments

[Николай Добрынин]

контент то оно в центр загнало но есть беда в обычном варианте контейнер длинной 1180px и одна часть текста прижата к левому краю. и получается тот контейнер который сгребается в центр длинной всего 500px примерно. что крайне мало

[Stalker_RED]

fbir, я не понимаю. Кто мешает вам центрировать тот контейнер, который нужно? или задать ему min-width, или о чем речь?