How to vertically align text in a div (boostrap 4)?

Question

I can't seem to center text in a boostrap column. I've tried "align-items-center", margin o auto and display: table etc and not sure why I can't get it to work? I've looked at several similar questions here also to no avail?

 .fakeimg {
    height: 200px;
    background: #aaa;
  }

  #fake {
        margin: 0 auto;
        text-align: center

<div class="container" style="margin-top:30px">
  <div class="row align-items-center">

    <div class="col-sm-8">
       <div id="fake" class="fakeimg">Center me vertically please</div>

</div>

Answer 1

Are you looking something like this?

   #fake {
        margin: 0 auto;
        text-align: center;
        background: lightgreen;
        color:white;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        }

<div class="container" style="margin-top:30px">
  <div class="row align-items-center">

    <div class="col-sm-8">
    <div id="fake" class="fakeimg">Center me vertically please</div>
   </div>
   </div>
</div>