Bootstrap中心div垂直[重复]答案

【问题标题】：Bootstrap center div vertically [duplicate]Bootstrap中心div垂直[重复]
【发布时间】：2018-02-23 18:06:56
【问题描述】：

我想将登录表单水平居中，它以移动设备为中心，但我不知道如何在监视器屏幕上实现相同的效果。我正在使用 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>

【问题讨论】：

标签： html center

【解决方案1】：

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

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

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

【讨论】：