How to align center the item in the table

I'm in making the responsive table using Bootstrap and some items are not aligned at the center of cell because the parent row element has multiple lines for some cells.

So I tried to apply flex-box style to table but it doesn't work well.

What should I do for sitting the element at the center of table.

• HTML

<table class="table">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col">Video Sync</th>
            <th scope="col">Video Sync Pro</th>
            <th scope="col">ADR Master Editor</th>
            <th scope="col">ADR Master Studio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="text-left feature feature-title">MOVIE PLAYBACK</td>
            <td class="text-center"></td>
            <td class="text-center"></td>
            <td class="text-center"></td>
            <td class="text-center"></td>
        </tr>
        <tr>
            <td class="text-left feature">Support for all of the most common codecs and containers</td>
            <td class="text-center"><span class="fa fa-check-circle">&nbsp;</span></td>
            <td class="text-center"><span class="fa fa-check-circle">&nbsp;</span></td>
            <td class="text-center"><span class="fa fa-check-circle">&nbsp;</span></td>
            <td class="text-center"><span class="fa fa-check-circle">&nbsp;</span></td>
        </tr>
    </tbody>
</table>

• CSS

    .table td {
        display: flex;
        align-items: center;
        justify-content: center;
    }

Normally the flex-box style doesn't apply to table.

Instead of flex-box style, you can use vertical-align property for vertical and text-align property for horizontal.

• CSS

.table td, table th {
    text-align: center;
    vertical-align: center;
}