title: Vertically align h1 tag
body: <p>I'm working on a Meteor app, using StylusGrid (a flexbox grid) for my layout and Transformicons for my menu button.<br>
  How can I vertically align this h1?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;header class="toolbar"&gt;
    &lt;section&gt;
      &lt;div class="menu-button"&gt;
        &lt;button type="button" class="tcon tcon-menu--xcross" aria-label="toggle menu"&gt;
          &lt;span class="tcon-menu__lines" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="tcon-visuallyhidden"&gt;toggle menu&lt;/span&gt;
        &lt;/button&gt;    
      &lt;/div&gt;
      &lt;h1&gt;MyApp&lt;/h1&gt;
    &lt;/section&gt;
    &lt;section class="links"&gt;
      &lt;a href="#"&gt;Help&lt;/a&gt;
    &lt;/section&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/41m6u14r/" rel="nofollow noreferrer">CSS on jsFiddle</a>.</p>
  
  <p>I want the H1 tag to be in line with the button in, vertically centered.<br>
  I set the flexbox grid rules so that it would vertically center the contents, which is working fine for the menu button and help link.<br>
  But the H1 is out of place. How can I fix it?</p>