title: Vertically centering a button in its own div within another div
body: <p>I am currently attempting to vertically center the buttons with the rest of the '.row'.</p>
  
  <p>Here is currently what I have. I have tried using things like adding <em>style="vertical-align: center;"</em> to different elements but the buttons do not move. The only solution I have found is to move them down with something like <em>'top: 100px;'</em> but of course that is not an efficient solution since it does not work on all screen sizes</p>
  
  <p>The buttons are in their own div (.col.s3) which helps orient them horizontally on the .row. The object here is to vertically center the two outside buttons to the middle group (.col.s6)</p>
  
  <p>Is there any way to easily vertically center these elements?</p>
  
  <p>Check the example here: <a href="https://jsfiddle.net/nn35pj3j/" rel="nofollow">https://jsfiddle.net/nn35pj3j/</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="row"&gt;
        &lt;div class="col s3"&gt;
          &lt;!-- First Button --&gt;
          &lt;a class="btn-floating btn-small waves-effect waves-light red left" style=""&gt;&lt;i class="mdi-content-add"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;/div&gt;
        &lt;!-- Middle --&gt;
        &lt;div class="col s6"&gt;
          &lt;h2 class="header" style="text-align: center"&gt;Buttons&lt;/h2&gt;
          &lt;div&gt;
            &lt;a class="waves-effect waves-light btn"&gt;One&lt;/a&gt;
            &lt;a class="waves-effect waves-light btn"&gt;Two&lt;/a&gt;
            &lt;a class="waves-effect waves-light btn"&gt;Three&lt;/a&gt;
            &lt;a class="waves-effect waves-light btn"&gt;Four&lt;/a&gt;
            &lt;a class="waves-effect waves-light btn"&gt;Five&lt;/a&gt;
            &lt;a class="waves-effect waves-light btn"&gt;Six&lt;/a&gt;
            &lt;a class="waves-effect waves-light btn"&gt;Seven&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="col s3"&gt;
          &lt;!-- Second Button --&gt;
          &lt;a class="btn-floating btn-small waves-effect waves-light red right"&gt;&lt;i class="mdi-content-add"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>