Bootstrap 垂直居中 div

Question

我想将登录表单水平居中，它在移动设备上居中，但我不知道如何在监视器屏幕上实现同样的效果。我正在使用 Bootstrap 3.

<div class="container-fluid main-container">
        <h2>Login</h2>
        <form action="/action_page.php">
            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="email">Username:</label>
                    <input type="email" class="form-control" id="email" placeholder="Enter your email" name="email">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-3">
                    <label for="pwd">Password:</label>
                    <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
                </div>
            </div>
            <div class="checkbox">
                <label><input type="checkbox" name="remember"> Remember me</label>
            </div>
            <div class="form-group row">
                <div class="col-sm-3">
                    <button type="submit" class="btn btn-default btn-block">Submit</button>
                </div>
            </div>
        </form>
    </div>

Answer 1

将容器设置为显示 flex 并像这样使用 justify-content 和 align-items

.container-fluid {
    display: flex;
    justify-content: center;
    align-items: center;
}

这是一个 css 解决方案，我认为您无法通过 bootstrap

实现

Bootstrap 垂直居中 div

Bootstrap center div vertically

html

center