我在视图中有一个表单，但我无法使用引导程序或普通 CSS 正确将其居中

Question

如何使用引导程序或纯CSS将此表单居中？到目前为止，我可以将它的某些部分居中，但其他部分在居中时会收缩，出现混乱。在我用助推器将元素居中后，它们变得非常小，所以我想我没有考虑

col-sm-2

他们有。。我该如何解决这个问题？

<h2>Operazione Spot</h2>
<h2>@Model.Heading</h2>
<hr />
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.Valuta, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.TextBoxFor(m => m.Valuta, "{0:dd-MM-yyyy}", new { @class = "form-control", @Value = @DateTime.Now.ToShortDateString(), @readonly = "readonly" })
</div>
@Html.LabelFor(m => m.Sell, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.EditorFor(m => m.Sell, new { htmlAttributes = new { @class = "form-control", placeholder = " eg 34.55" } })
@Html.ValidationMessageFor(m => m.Sell, "", new { @class = "text-danger " })
</div>
@Html.LabelFor(m => m.Buy, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.EditorFor(m => m.Buy, new { htmlAttributes = new { @class = "form-control", placeholder = " eg 34.55" } })
@Html.ValidationMessageFor(m => m.Buy, "", new { @class = "text-danger " })
</div>
@Html.LabelFor(m => m.Cliente, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.DropDownListFor(m => m.ClienteId, new SelectList(Model.Cliente, "Id", "Name"), new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Cliente, "", new { @class = "text-danger " })
</div>
@Html.LabelFor(m => m.Note, new { @class = "col-sm-2 control-label" })
<div class="col-md-3">
@Html.TextAreaFor(m => m.Note, new { @class = "form-control" })
@Html.ValidationMessageFor(m => m.Note, "", new { @class = "text-danger " })
</div>
<div class="col-md-offset-2 col-md-10">
<button type="submit" class="btn btn-primary">Aplica</button>
<a class="btn btn-default" href="@Url.Action("Index", "Home")"> Cancel</a>
</div>
</div>
}

Answer 1

这会起作用的！

.form-group {
display: flex;
flex-direction: column;
justify-content:center; //center verticaly
align-items:center; //center horizontally
}