Bootstrap center div vertically

Question

I would like to center horizontally the login form, it is centered on mobile devices, but I can't figure out how to achieve the same on a monitor screen. I am using 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

Set the container to display flex and use justify-content and align-items like this

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

this is a css solution I don't think you can achieve this with bootstrap