Выровнять содержимое в div: абсолютно по низу И относительно центра

Question

Я пытался выровнять содержимое в div по низу (что, кажется, работает только с абсолютным) И в то же время разместить содержимое в центре.

В моем коде ниже проблема относится к изображениям, которые расположены либо по центру и сверху, либо слева и снизу, но никогда и то и другое.

Я пробовал разные CSS подходы, а также просто использовал старомодную таблицу для изображения, но, похоже, ничего не работает, чтобы получить оба одновременно.

Как расположить изображения по центру и внизу?

jsfiddle

.x-offer:nth-of-type(1) { 
background-color: #c5d7d9; 
}

.x-offer:nth-of-type(2) { 
background-color: #e6e0cf; 
}
.x-offer:nth-of-type(3) { 
background-color: #debfb5; 
}
.x-offer { 
padding: 20px 0 0 0 !important;

}
.x-offer.nails > .flex-column {
width: 90%;
}
.x-offer > .flex-column {
width: 100%;

}
.x-offer > .flex-column > div:nth-of-type(2) {
bottom: 0px;  
width: 75%;
margin: 0px auto;
position: absolute;
bottom: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">


<div class="container">
  <div class="row" style="height: 250px;">
  
    <!-- STYLING -->
    <div class="col-sm text-center d-flex align-items-top justify-content-center x-offer styling">
      <div class="flex-column justify-content-center" style="border: 1px solid green;">
      <div style="border: 1px solid;">
      STYLING<p>&nbsp;</p> 
      </div>
      <div style="border: 1px solid;">
      <img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service1.gif" style="max-height: 50%; max-width: 100%">
    </div>
      </div>
      </div>

    <!-- HAIR -->
    <div class="col-sm text-center d-flex align-items-top justify-content-center x-offer hair">
      <div class="flex-column" style="border: 1px solid green;">
      <div style="border: 1px solid;">
      HAIR<p>&nbsp;</p> 
      </div>
      <div style="border: 1px solid;">
      <img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service3.gif" style="max-height: 50%; max-width: 100%">
    </div>
      </div>
      </div>


    <!-- NAILS -->
    <div class="col-sm text-center d-flex align-items-top justify-content-center x-offer nails ">
      <div class="flex-column" style="border: 1px solid green;">
      <div style="border: 1px solid;">
      NAILS<p>&nbsp;</p> 
      </div>
      
  
      <div style="border: 1px solid;">    
      <img src="http://davids134.sg-host.com/wp-content/uploads/2020/08/service2.gif" style="max-height: 50%; max-width: 100%">
   
      
    </div>
      </div>
      </div>
      
  </div>  </div>

Answer 1

Вам следует добавить классы d-flex и align-items-center к div, к которым в настоящее время применен класс flex-column:

<div class="d-flex align-items-center flex-column" style="border: 1px solid green;">

Подробнее о гибкости можно узнать в bootstrap 4 документация здесь: https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 2

Измените стиль ваших .x-offer > .flex-column > div:nth-of-type(2)

Добавьте left и right параметров и установите для них 0:

.x-offer > .flex-column > div:nth-of-type(2) {
    bottom: 0px;  
    width: 75%;
    margin: 0px auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

Вот скрипка

Answer 3

Вам нужны 2 вещи (я помечу их в коде).

1. Гибкий контейнер
2. Элемент, который расширяется в этом контейнере (до pu sh last элемент вниз)

.x-offer {
  border: 1px solid green;
  height: 250px;
}

.image-bottom-wrapper {
  text-align: center;
}

.image-bottom-wrapper img {
  max-width: 100px;
  max-height: 50px;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="container">

  <div class="row">
    <div class="col col-4 x-offer styling d-flex flex-column"><!-- [1] -->
      <div class="headline">
        STYLING
      </div>
      
      <div class="flex-grow-1 text"><!-- [2] -->
        Some Text Here...
      </div>
      

      <div class="image-bottom-wrapper">
        <img src="https://dummyimage.com/300x200/CCC/000" />
      </div>
    </div>
  </div>
  
</div>