Bootstrap 4 vertically center text in div

Answer 1

You can used Flex box predefine class in Bootstrap for that:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="accordion">
  <div class="card ">
    <div class="card-header" id="@itm.Id">
      <div class="row">
        <div class="col-2 border rounded justify-content-center  d-flex align-items-center">
          text to center
        </div>
        <div class="col-2 border rounded text-center">                           ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
        </div>
      </div>
    </div>
  </div>
</div>

For Information you can read here.

Answer 2

Try adding my-auto to the first div inside the row.

<div class="col-2 border rounded text-center my-auto">

https://jsfiddle.net/7zm40xj9/7/

Answer 3

Please Use Class: justify-content-center