css - 如何将面板居中？

Question

我是第一次学习bootstrap。我很难将面板集中在页面中间以进行登录。

示例:

<div class="container">
    <div style='width:500px' class="panel panel-default">

        <div class="panel-heading">Login</div>
        <div class="panel-body">
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Login</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputEmail">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">Password</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="inputPassword">
                    </div>
                </div>


                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="button" class="btn btn-lg btn-primary">Login</button>
                    </div>
                </div>
            </form>
        </div>

    </div>
</div>

如何做到这一点？

Answer 1

See Your Modified Code >> Middle Panel

<div style='width:500px;margin:0 auto;' class="panel panel-default">