如何将此Bootstrap登录表单移动到视口中心

如何解决如何将此Bootstrap登录表单移动到视口中心

如何将登录视图设置为屏幕中心？不管我尝试什么，都会变得凌乱。我是Bootstrap和编码的新手。

我尝试将项目居中对齐并进行对齐，但是它们似乎不起作用。

<h2 style="padding-top: 50px">Welcome to Portal.</h2>
<hr/>
<h4 style="padding-top: 20px">Please log in to continue.</h4>
<div class="row justify-content-center" style="padding-top: 30px">
    <div class="col-6">
        <section id="loginForm">
            @using (Html.BeginForm("Login","Account",new { ReturnUrl = ViewBag.ReturnUrl },FormMethod.Post,new { @class = "form-horizontal",role = "form" }))
            {
                @Html.AntiForgeryToken()
                @Html.ValidationSummary(true,"",new { @class = "text-danger" })
                <div class="form-group">
                    @Html.LabelFor(m => m.Email,new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.TextBoxFor(m => m.Email,new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Email,new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    @Html.LabelFor(m => m.Password,new { @class = "col-md-2 control-label" })
                    <div class="col-md-10">
                        @Html.PasswordFor(m => m.Password,new { @class = "form-control" })
                        @Html.ValidationMessageFor(m => m.Password,new { @class = "text-danger" })
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <div class="checkBox">
                            @Html.CheckBoxFor(m => m.RememberMe)
                            @Html.LabelFor(m => m.RememberMe)
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-offset-2 col-md-10">
                        <input type="submit" value="Log in" class="btn btn-primary" />
                    </div>
                </div>
                
                    <p>
                        @Html.ActionLink("Forgot your password?","ForgotPassword")
                    </p>
            }
        </section>
    </div>
</div>

所需的输出：

我的输出：

解决方法

尝试将 d-flex 添加到您的行中，以便证明内容中心正常工作。

,

使用最大宽度为的容器包装您的登录div。这样可以解决您的问题。 这样可以确保容器位于居中位置。

我已经删除了您在登录部分放置的justify-content-center和多余的col-6，并用具有最大宽度的容器包装了它。

<h2 class="mt-3">Welcome to Portal.</h2>
<hr/>
<div class="container mt-5" style="max-width:400px">
   <h4 class="mt-2">Please log in to continue.</h4>
   <div class="row">
      <section id="loginForm">
         @using (Html.BeginForm("Login","Account",new { ReturnUrl = ViewBag.ReturnUrl },FormMethod.Post,new { @class = "form-horizontal",role = "form" }))
         {
         @Html.AntiForgeryToken()
         @Html.ValidationSummary(true,"",new { @class = "text-danger" })
         <div class="form-group">
            @Html.LabelFor(m => m.Email,new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
               @Html.TextBoxFor(m => m.Email,new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.Email,new { @class = "text-danger" })
            </div>
         </div>
         <div class="form-group">
            @Html.LabelFor(m => m.Password,new { @class = "col-md-2 control-label" })
            <div class="col-md-10">
               @Html.PasswordFor(m => m.Password,new { @class = "form-control" })
               @Html.ValidationMessageFor(m => m.Password,new { @class = "text-danger" })
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
               <div class="checkbox">
                  @Html.CheckBoxFor(m => m.RememberMe)
                  @Html.LabelFor(m => m.RememberMe)
               </div>
            </div>
         </div>
         <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
               <input type="submit" value="Log in" class="btn btn-primary" />
            </div>
         </div>
         <p>
            @Html.ActionLink("Forgot your password?","ForgotPassword")
         </p>
         }
      </section>
   </div>
</div>

,

要使内容从顶部到底部居中，请在行中添加align-items-center，并注意plz，必须将row的高度设为

左右使用width : max-content，margin : 0 auto

查看此内容：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>asdasd</title>
    <link rel="stylesheet" href="css/general/bootstrap.css">
    <style>

        .row{
            height: 100vh;
        }

        .main_field{
            width: max-content;
            margin:  0 auto;
        }

    </style>

</head>

<body>

    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="main_field">
                <form>
                    <div class="form-group">
                      <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                      <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <div class="form-group form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
            </div>
        </div>
    </div>

</body>

</html>