how to center a span vertical inside a button with bootstrap 4 [duplicate]

You can use flex and align-items: center to vertically center all items in the button. Apply the following styles to your button element:

.btn {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

Or even better, you could simply use Bootstrap 4 classes in your button tag to achieve the same result:

<button class="d-flex align-items-center justify-content-between btn btn-primary w-50 my-4">
    Comments Moderation <span class="approve-counter rounded-circle bg-danger text-white text-center float-right">5</span>
</button>