如何实现Bootstrap列占整行高度且内容垂直居中？

你可以通过给每个router-link添加Bootstrap的flex布局类来实现需求，修改后的代码如下：

<div class="row fixed-bottom mobile-navbar align-items-center">
    <router-link to="/" class="col h-100 d-flex align-items-center justify-content-center">Home</router-link>
    <router-link to="/scan" class="col h-100 d-flex align-items-center justify-content-center">Scan</router-link>
    <router-link to="/account" class="col h-100 d-flex align-items-center justify-content-center">Account</router-link>
</div>

关键修改说明： #

• 给每个router-link加上d-flex，将元素转为flex容器，这样才能用flex布局控制内部文本的对齐方式
• align-items-center实现文本垂直居中，刚好满足列内内容垂直居中的需求
• justify-content-center为可选类，用来让文本水平居中，不需要的话可以直接去掉
• 保留原有的col h-100，确保每个列占满整行的宽度和高度

之前你尝试加py-auto没效果，是因为py-auto仅用于调整内边距，且当时元素并非flex容器，无法通过内边距实现自适应的垂直居中。

内容的提问来源于stack exchange，提问作者decentduck