如何在保留tablist位置的前提下垂直居中tab-content？

现有基于Bootstrap的表单布局，需仅让表单所在的tab-content区域垂直居中显示，同时保持左侧tablist导航按钮的位置不变。尝试过设置flex-direction、float、各类对齐属性、Bootstrap的justify-content-sm-center类等方式均无效，硬编码左外边距虽能实现但无法适配所有屏幕尺寸。

原代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="h-100">
    <div class="rounded-lg d-block d-sm-flex">
        <div class="profile-tab-nav border-right">
            <div class="p-4">
                <img class="rounded-circle" style="width: 100px" alt="Avatar"
                     src={{ request.user.profile.photo.url }}/>
            </div>
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="profile-tab" data-toggle="pill" href="#profile-tab-panel" role="tab"
                   aria-controls="profile" aria-selected="true">
                    <i class="fa fa-universal-access text-center mr-1"></i>
                    Profile
                </a>
                <a class="nav-link" id="security-tab" data-toggle="pill" href="#security-tab-panel" role="tab"
                   aria-controls="security" aria-selected="false">
                    <i class="fa fa-shield text-center mr-1"></i>
                    Security
                </a>
            </div>
        </div>
        <div class="tab-content" id="v-pills-tabContent">
            <form>
                <div>
                    <label>
                        <input type="text" class="row" placeholder="First name">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="text" class="row" placeholder="Last name">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="email" placeholder="Email">
                    </label>
                </div>
            </form>
        </div>
    </div>
</section>

已尝试的无效设置 #

• <div class="tab-content" style="flex-direction: column" id="v-pills-tabContent">
• <div class="tab-content" style="float: right" id="v-pills-tabContent">
• <div class="tab-content" style="align-content: center; align-self: center; align-items: center" id="v-pills-tabContent">
• <div class="tab-content justify-content-sm-center" id="v-pills-tabContent">

解决方案 #

通过Bootstrap的flex布局类即可实现适配所有屏幕的垂直居中效果，无需硬编码边距：

1. 给包含导航和tab-content的父容器（d-sm-flex所在div）添加align-items-sm-center类，确保小屏幕及以上尺寸时垂直对齐子元素
2. 给tab-content添加d-flex align-items-center justify-content-center h-100类，让其成为flex容器，垂直+水平居中内部表单，并占满父容器可用高度

修改后的完整代码 #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<section class="h-100">
    <div class="rounded-lg d-block d-sm-flex align-items-sm-center">
        <div class="profile-tab-nav border-right">
            <div class="p-4">
                <img class="rounded-circle" style="width: 100px" alt="Avatar"
                     src={{ request.user.profile.photo.url }}/>
            </div>
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link active" id="profile-tab" data-toggle="pill" href="#profile-tab-panel" role="tab"
                   aria-controls="profile" aria-selected="true">
                    <i class="fa fa-universal-access text-center mr-1"></i>
                    Profile
                </a>
                <a class="nav-link" id="security-tab" data-toggle="pill" href="#security-tab-panel" role="tab"
                   aria-controls="security" aria-selected="false">
                    <i class="fa fa-shield text-center mr-1"></i>
                    Security
                </a>
            </div>
        </div>
        <div class="tab-content d-flex align-items-center justify-content-center h-100" id="v-pills-tabContent">
            <form>
                <div>
                    <label>
                        <input type="text" class="row" placeholder="First name">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="text" class="row" placeholder="Last name">
                    </label>
                </div>
                <div>
                    <label>
                        <input type="email" placeholder="Email">
                    </label>
                </div>
            </form>
        </div>
    </div>
</section>

内容的提问来源于stack exchange，提问作者watch-this