title: How to vertically center elements in Bulma?
body: <p>How can I vertically center this <code>&lt;div class="columns is-vcentered"&gt;</code> to that red colored section which is enclosing it?</p>
  
  <p>And should I remove or add some classes here to improve this code? Please suggest me. Thanks!</p>
  
  <p>I am new to CSS framework, never tried Bootstrap and instead opted for Bulma.</p>
  
  <p><a href="https://i.stack.imgur.com/7XdRZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7XdRZ.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;section id="eyes" class="section"&gt;
      &lt;div class="container"&gt;
          &lt;div class="columns is-vcentered"&gt;
              &lt;div class="column"&gt;
                  &lt;h1&gt;Eyes on what matters&lt;/h1&gt;
                  &lt;p&gt;Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="column"&gt;
                  &lt;img class="image" src="img/roll.jpg" alt=""&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>In CSS apart from coloring elements, I've only done this:</p>
  
  <pre><code>section {
      height: 70vh;
  }
  </code></pre>