Bootstrap 5表格单元格垂直对齐失效问题求助

各位好，我目前在使用Bootstrap 5开发一个响应式员工列表表格，希望所有单元格的内容都能垂直居中显示。我按照文档说明给表格元素添加了align-middle类，但实际效果里单元格内容还是贴在顶部，完全没达到垂直居中的效果。

下面是我的完整代码片段，麻烦帮我排查下问题所在：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Employee Table</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h2 class="text-center mb-4">Employee List</h2>
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover align-middle mx-auto" style="width: 80%;">
                <thead class="table-dark text-center">
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                        <th class="text-end">Salary</th>
                        <th>Department</th>
                        <th>Active</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="text-start">Anna Kovács</td>
                        <td class="text-center">28</td>
                        <td class="text-end">450,000</td>
                        <td class="text-center">Marketing</td>
                        <td class="text-center">*</td>
                    </tr>
                    <!-- Additional rows... -->
                </tbody>
            </table>
        </div>
    </div>
    <!-- Bootstrap 5 JS (optional) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

我还试着把align-middle移到<tr>或者单个<td>标签上测试，结果还是一样没效果。有没有朋友遇到过类似的情况，或者能指出我哪里操作失误了？

内容来源于stack exchange