title: Vertically center Bootstrap 3 button within column
body: <p>I've spent some time trying to figure out why my button will not center vertically inside of a column I figured I would ask here because I think I'm missing something, the HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="row"&gt;
          &lt;div class="sellthem"&gt;
              &lt;div class="col-sm-8 col-sm-offset-1"&gt;
                  &lt;div class="sellContent"&gt;
                      &lt;h1 class="sellHeader"&gt;Bacon ipsum dolor amet fatback turkey filet mignon&lt;/h1&gt;
                      &lt;h4 class="sellText"&gt;Bacon ipsum dolor amet fatback turkey filet mignon ham T-bone alcatra drumstick tenderloin strip steak meatball. Rump picanha chicken beef sausage tri-tip&lt;/h4&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="col-sm-2 sendThem"&gt;
                  &lt;button type="button" class="btn btn-lg btn-block"&gt;Sign Up&lt;/button&gt;
              &lt;/div&gt;  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The text in the <code>h1</code> and <code>h4</code> tags will change so the height could change and I would like to center the button within the column <code>col-sm-2</code>.  When I researched the Bootstrap documentation under <a href="http://getbootstrap.com/css/#buttons" rel="nofollow noreferrer">buttons</a> there isn't anything mentioned regarding vertically centering.  </p>
  
  <p>When I searched SO I run across <a href="https://stackoverflow.com/questions/22242447/how-can-i-center-vertically-a-bootstrap-class-button">How can I center vertically a bootstrap class button?</a> but it uses a forced height of <code>200px</code>, <a href="https://stackoverflow.com/questions/22242447/how-can-i-center-vertically-a-bootstrap-class-button/22242651#22242651">answer</a>:</p>
  
  <pre><code>div#container {
      height: 200px; 
      border: solid 2px green; text-align:center;
      line-height:200px;
  }
  input#verticalButton {
       vertical-align: middle;
  }
  </code></pre>
  
  <p>Further research, <a href="https://stackoverflow.com/questions/22578853/how-to-center-buttons-in-twitter-bootstrap-3#22578853">How to center buttons in Twitter Bootstrap 3?</a> suggests <code>center-block</code> but that is for horizontal centering and I want vertical centering.</p>
  
  <p>Further down the rabbit hole I ran across <a href="https://stackoverflow.com/questions/18949860/button-vertical-align-bootstrap">button vertical align bootstrap</a> but when I try:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="sendThem"&gt;
      &lt;div class="col-sm-2"&gt;
          &lt;button type="button" class="btn btn-lg btn-block"&gt;Sign Up&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.sendThem {
      display:table;
  }
  .sendThem .col-sm-2 {
      display:table-cell;
      vertical-align:middle;
      float:none;    
  }
  </code></pre>
  
  <p>my result is the same and that is a button at the top.  I thought, per reading somewhere that there could be an issue caused by the column but I can't seem to locate that documentation.</p>
  
  <p>What is the proper way to center the button vertically with HTML and CSS so I can get something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/5b8yA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5b8yA.png" alt="enter image description here"></a></p>
  
  <p>I wasn't planning to use a set height, and anything below <code>col-sm</code> was going to be a full width centered button. Here is a <a href="http://www.bootply.com/Vh4KOzORiN" rel="nofollow noreferrer"><strong>Bootply</strong></a> trying to center the button vertically.</p>