Align content in div: absolute to bottom AND relative to center - html

Question

I have been trying to align content in a div to the bottom (which seems only to work with absolute) AND at the same time to position the content in the center.
In my code below, the problem refers to the images, which are either centered and at top OR left and bottom, but never both.
I have tried different CSS approaches as well as just using an old fashioned table for around the image, but nothing seems to work to get both at the same time.
How to position the images center and at bottom?
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> </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> </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> </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

Modify style of your .x-offer > .flex-column > div:nth-of-type(2)
Add left and right parameters, and set them to 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;
}
Here's fiddle

Answer 2

You should add the classes d-flex and align-items-center to the divs that currently have the flex-column class applied:
<div class="d-flex align-items-center flex-column" style="border: 1px solid green;">
You can see more about flex in bootstrap 4 documentation here: https://getbootstrap.com/docs/4.0/utilities/flex/

Answer 3

There are 2 things you need (I mark them in code).
A flex container
An item, which expands within this container (to push last element down)
.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>