html - 垂直居中对齐 Bootstrap 4 Form-Group Row

Question

我有一个看起来像这样的表单:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal card card-body my-bg">

        <div class="form-group row justify-content-center align-content-center">
            <div class="col-md">
                @Html.Label("My Label", new { @class = "control-label col-md-12" })
                <div class="col-md-12">
                    @Html.TextBoxFor(model => model.TestName, null, new { @class = "form-control", @disabled = "disabled" })
                </div>
            </div>
            <div class="col-md">
                @Html.Label("Label Two", new { @class = "control-label col-md-12" })
                <div class="col-md-12">
                    @Html.TextBoxFor(model => model.TestProperty, null, new { @class = "form-control", @disabled = "disabled" })
                </div>
            </div>
        </div>
    </div>
}

如您所见，我已经尝试过 justify-content-center align-content-center，但它们并没有使我的表单垂直居中。

如何使表单垂直居中？

Answer 1

垂直中心相对于容器的高度，在这种情况下容器 (.card) 没有定义的高度。

给卡片一个高度，使用justify-content-center让卡片内容垂直居中...

https://www.codeply.com/go/FdHqOtS3Av

.card {
    min-height: 300px;
}