基于Identity提供的登录页面修改的显示左右垂直居中效果

Identity提供的登录页面只能说能用而已，想要漂亮一点，只能进行修改。我们需要左右垂直居中效果，同时加一个有颜色的边框，排列更符合中国人的审美习惯，具体代码如下：

@page
@model LoginModel

@{
    ViewData["Title"] = "账户登录";
}

<style>
    .top {
        margin-top:150px;
    }
    .bd {
        border-style: solid;
        border-width: medium;
        border-color: #98bf21;
    }
</style>
<div class="top">
    <div class="row" >
        <div class="col-md-4"></div>
        <div class="col-md-4 bd">
            <section>
                <form id="account" method="post">
                    <h3 class="text-center">@ViewData["Title"]</h3>
                    <hr />
                    <div asp-validation-summary="All" class="text-danger"></div>
                    <div class="form-group form-inline justify-content-center">
                        <label asp-for="Input.UserName"></label>
                        <input asp-for="Input.UserName" class="form-control" />
                        @*<span asp-validation-for="Input.UserName" class="text-danger"></span>*@
                    </div>
                    <div class="form-group form-inline justify-content-center">
                        <label asp-for="Input.Password"></label>
                        <input asp-for="Input.Password" class="form-control" />
                        @*<span asp-validation-for="Input.Password" class="text-danger"></span>*@
                    </div>
                    <div class="form-group form-inline justify-content-around">
                        <button type="submit" class="btn btn-primary w-50">登录</button>
                        <p>
                            <a id="forgot-password" asp-page="./ForgotPassword">忘记密码？</a>
                        </p>
                    </div>
                </form>
            </section>
        </div>
        @*<div class="col-md-4"></div>*@
    </div>
</div>

说明：左右居中的实现思路是根据col-md-4把页面三等分，前面加一个空白的，第二个则是居中的，第三个可以省略，同时使用justify-content属性。然后是垂直居中效果并不好，所以想了简单办法使用margin-top来上面留空。