CSS：垂直居中响应式引导表单

Question

我有以下表格

<div class="form-group">
<div class="col-xs-10">
    <div class="span7 text-center vcenter">
        <form id="formid" method="get">
            <label for="platform" class="control-label">Enter Code, IMEI or Phone Number:</label><br />
            <input type="text" class="form-control" name="filtername" placeholder="Please Enter Code" />
            <input id="btngo" class="btn btn-success" value="GO" />
        </form>
        @using (Html.BeginForm("Index", "Home", FormMethod.Get))
        {
            <p>
                @Html.TextBox("filtername")
                <input type="submit" class="btn btn-success" value="GO" />
            </p>
        }
    </div>
</div>

和 CSS：

.vcenter {
float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
}

我正在尝试将上述表单元素垂直居中以保持页面响应，但我无法让以下任何帖子中的代码为我工作。这让我相信要么他们对我的代码有所不同，要么我只是做错了。

任何人都可以解释居中的引导方式吗？

我尝试过的一些代码位：

...

class="以分页为中心"

我尝试过的以前的帖子： Twitter Bootstrap 3, vertically center content How to center align vertically the container in bootstrap vertical-align with Bootstrap 3

Answer 1

试试这个fiddle。

我对 css 做了一点改动：

.outer {
    display:table;
    height:300px;
    text-align:center;
}
.vcenter {
    display:table-cell;
    vertical-align:middle;
}