twitter-bootstrap - 将 Bootstrap 按钮放在部分中间

Question

这是 html 代码，使用 Bootstrap 3:

<section class="col-md-12 section2 "> 
  <div class="row">
      <div class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
        <button ><a href=""class="sec2Text ">test</a></button>
      </div> 
    </div>
</section>

CSS 类:

.section2{
 height:310px;
 max-height:310px;
}

a.sec2Text{
 color:#000;
 font-size:55px;
}

首先，我尝试将按钮放在所有屏幕的部分中间。尝试使用:margin:auto;，在这种情况下水平对齐，但垂直对齐(按钮保持在顶部 od 部分)。文本居中，也不解决问题...

我可能可以为每个屏幕使用@media 来做到这一点，但想知道是否有任何通用解决方案..

谢谢，

Answer 1

试试这个:

<div style="display:table; height:310px; width: 100%;">
  <div style="display:table-cell;vertical-align:middle;">
    <button style="text-align:center;">Text Content</button>
  </div>
</div>

更多信息请查看:how to center in css