Equal height columns + vertical and horizontal centered content in Bootstrap 4

Question

I'm struggling trying to make two columns same height, but still horizontally and vertically align the content within the first column.

This sums up what I'm trying to do:

<div class="row">
<div class="col-lg-4 align-self-center">
    <p>Text here should be centered both horizontally and vertically. But this col should have the same height as the col containing the image.</p>
</div>
<div class="col-lg-8">
    <img class="img-fluid" src="http://via.placeholder.com/1920x1080">
</div>

You can also have a look here: https://www.codeply.com/go/bGhFGn8nqq

I've tried multiple things, but I can't seem to get it right.

Thanks in advance.

Answer 1

Center the content p inside the column...

https://codeply.com/go/lyPAOH1Tq2

<div class="row">
    <div class="col-lg-4 d-flex">
        <p class="my-auto">Text here should be centered both horizontally and vertically. But this col should have the same height as the col containing the image.</p>
    </div>
    <div class="col-lg-8">
        <img class="img-fluid" src="http://via.placeholder.com/1920x1080">
    </div>
</div>