Выровнять текст по центру верхней части div и кнопку в конце

Question

У меня есть контейнер для div вроде этого:

<div class="text-offer_dos">
       <div class="centrar">
        <h3>Lorem ipsum dolor!</h3>
        <h5></h5>
        <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
        <button class="btn btn-default btn-deal"  itemprop="potentialAction" data-codigo="sieteporseis">Donec vitae</button>
      </div>
    </div>

Я хочу установить текст в верхний центр элемента div и кнопку в конце.

Это не работает - вот что я тестировал:

.centrar {
    background-color: rgb(0,0,0, 0.5);
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
}

Мне нужно сделать это только с помощью CSS, а не HTML.

Answer 1

Используйте флексбокс для колонок , отцентрируйте его горизонтально, используя align-items: center, и нажмите кнопку внизу, используя margin-top: auto - см. Демонстрацию ниже:

.centrar {
  background-color: rgb(0, 0, 0, 0.5);
  height: 390px;
  display: flex;
  flex-direction: column; /* column direction */
  align-items: center;
}

.centrar button { /* This pushes the button to the bottom*/
  margin-top: auto;
}

<div class="text-offer_dos">
  <div class="centrar">
    <h3>Lorem ipsum dolor!</h3>
    <h5></h5>
    <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
    <button class="btn btn-default btn-deal" itemprop="potentialAction" data-codigo="sieteporseis">Donec vitae</button>
  </div>
</div>

Answer 2

Попробуйте это

.centrar {
    background-color: rgb(0,0,0, 0.5);
    height: 390px;
    display: flex;
    align-items: flex-start;
    justify-content:flex-start;
    padding-bottom: 50px;
    position: relative;
}
.centrar > button.btn:last-child{
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}

<div class="text-offer_dos">
       <div class="centrar">
        <h3>Lorem ipsum dolor!</h3>
        <h5></h5>
        <p class="text"><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</b></p>
        <button class="btn btn-default btn-deal"  itemprop="potentialAction" data-codigo="sieteporseis">Donec vitae</button>
      </div>
    </div>