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

问题描述

如何使用引导程序或纯CSS将此表单居中？到目前为止，我可以将它的某些部分居中，但是居中时其他部分会缩小并且混乱。当我使用boostrap将元素居中之后，它们会变得很小，所以我想我不在考虑了

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,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>
}

解决方法

这可以工作！

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