title: How do I vertically align elements inside a centered column, using Bulma?
body: <p><strong>How do I vertically align elements inside a centered column using Bulma?</strong></p>
  <p>current results:
  <a href="https://i.stack.imgur.com/EuhRd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EuhRd.png" alt="enter image description here" /></a></p>
  <p>My code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div id=&quot;dataFetcher&quot; class=&quot;box&quot;&gt;
      &lt;h1 class=&quot;block&quot;&gt;Data Fetcher&lt;/h1&gt;
      &lt;div class=&quot;columns is-vcentered is-centered&quot;&gt;
        &lt;div id=&quot;123&quot; class=&quot;column has-background-success is-half&quot;&gt;
            &lt;input type=&quot;text&quot; class=&quot;&quot;&gt;
            &lt;button type=&quot;button&quot; :class=&quot;{ 'is-loading': isLoading } &quot; class=&quot;block button is-vcentered&quot; @click=&quot;fetchData&quot;&gt;Fetch data&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>Thinking:</p>
  <p>I've used a <code>.columns .is-centered</code> div to center horizontally. Check.</p>
  <p>But for vertical alignment, <code>.columns .is-vcentered</code> isn't the answer because it requires two separate columns (which feels like the wrong approach to me?).</p>
  <p>Other references I've seen imply using <code>.is-flex .is-align-items-center</code> to get some Flexbox action going, but putting that on or inside the column div breaks the horizontal alignment from <code>.columns</code>.</p>