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; 
} 

我試圖垂直居中上述表單元素保持頁面響應，但我不能得到任何以下任何職位的代碼爲我工作。這導致我相信他們的代碼與我的代碼有所不同，或者我只是簡單地做錯了。

任何人都可以解釋bootstrap的方式居中？

一些代碼位香港專業教育學院的嘗試：

...

類= 「分頁爲本」

早先崗位我用盡： 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; 
}