html - 无法很好地定位到中心

Question

我正在尝试将井定位到页面的中心。 SO上有类似的问题，但是代码和我的有些不同。我的 HTML 如下:

        <div class="container">
            <div class="row">
                <div class="well col-sm-4" align="center">
                    <div class="text-center">
                        <p><h2>Login</h2></p>
                    </div>
                    <hr>
                    <form role="form">
                        <div class="form-group text-center">   
                            <label for="username">Username</label>
                            <input type="text" class="form-control" id="username">
                        </div>
                        <div class="form-group text-center">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password">
                        </div>
                        <hr>
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary">Submit</button>
                            <button type="button" class="btn btn-warning">Forgot password</button>
                        </div>
                        <hr>
                        <div class="text-center">
                            <p>Don't have an account yet? <a>Create one now</a></p>
                        </div>
                     </form>   
                </div>
            </div>
        </div>

我尝试将井 div 放入另一个具有 col-md-12 和其他值的 div 中，但井没有居中。有谁知道我如何才能使页面居中？

Answer 1

你可以试试 offsetting columns

给你的列类col-sm-offset-4

像这样:<div class="well col-sm-offset-4 col-sm-4">

示例:http://jsfiddle.net/u48v34p7/