Javascript 达到浏览器高度时，垂直对齐内容和滚动框

我有一个表单，我想垂直居中，通过单击一个链接添加另一个，每次添加一个输入到html，当达到浏览器高度时，将滚动应用到其容器。 我使用的是显示：表单元格和溢出流y：滚动，但是内容在中间对齐。

<div class="row justify-content-center align-items-center">
    <div class="col-12 col-sm-10 col-md-8 col-xl-6">
        <div id="spaceTeammatesBox" class="space-box form animated fadeInLeft">
            <div class="team-emails-outer">
                <div class="team-emails-inner">
                    <h3 class="mb-4">{% trans "Who is on your team?" %}</h3>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. name@example.com"></span>
                    </div>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. name@example.com"></span>
                    </div>
                    <div class="form-group forms">
                        <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                        <span class="input-line" data-placeholder="Ex. name@example.com"></span>
                    </div>
                </div>
                <div>
                    <div class="add-teammate-link d-flex flex-row-reverse text-right">
                        <a href="#" id="addAnother">{% trans "add another" %}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如何在bootstrap 4中同时进行垂直对齐和垂直滚动？

---

提前感谢您的帮助。

为此，您可以使用两个容器：一个用于垂直放置物品，另一个用于滚动。在你的cace中，我会添加一个新的以类为中心的内容。然后我将这个div的内容包装在另一个带有类滚动框的容器中。这两个类的css如下所示：

.以内容为中心{ 显示器：flex； 对齐项目：居中；/*此选项垂直居中子容器*/ } .以内容为中心。滚动框{ 最大高度：100%；/*这可防止滚动框溢出父对象的高度*/ 宽度：100%；/*这会将滚动条推到框的最边缘*/ 溢出：自动；/*这允许仅在必要时显示滚动*/ } 整个过程是这样的，请在整个页面中打开它：

$'addAnother'。单击函数{ $'SpaceMatteamsbox'.find'.form group.forms'.last.after` `; }; 太空箱{ 背景：浅蓝色； 宽度：100%； } .团队内部电子邮件{ 高度：calc100vh-100px； 填充：10px； } .以内容为中心{ 显示器：flex； 对齐项目：居中； } .以内容为中心。滚动框{ 最大高度：100%； 宽度：100%； 溢出：自动； } {%trans您的团队中有谁？%}

$('#addAnother').click(function() {
        $('#spaceTeammatesBox').find('.form-group.forms').last().after(`
            <div class="form-group forms">
                <input type="email" class="form-control form-input" aria-describedby="email" autocomplete="off">
                <span class="input-line" data-placeholder="Ex. name@example.com"></span>
            </div>
        `);
    });

#spaceTeammatesBox {
    background: lightblue;
    display: table;
    width: 100%;
}

.team-emails-outer {
    display: table-cell;
    width: 100%;
}

.team-emails-inner {
    height: calc(100vh - 100px);
    overflow-y: scroll;
}