How to vertically center elements in Bulma?

Question

How can I vertically center this <div class="columns is-vcentered"> to that red colored section which is enclosing it?

And should I remove or add some classes here to improve this code? Please suggest me. Thanks!

I am new to CSS framework, never tried Bootstrap and instead opted for Bulma.

<section id="eyes" class="section">
    <div class="container">
        <div class="columns is-vcentered">
            <div class="column">
                <h1>Eyes on what matters</h1>
                <p>Backtick is made to look minimal, so you can focus on your code, always. From UI to linter errors, everything is kept non-obtrusive.</p>
            </div>
            <div class="column">
                <img class="image" src="img/roll.jpg" alt="">
            </div>
        </div>
    </div>
</section>

In CSS apart from coloring elements, I've only done this:

section {
    height: 70vh;
}

Answer 1

I think it's a bit funny that .columns does not have display:flex; by default (should it have perhaps?). Anyway, if you use something that adds flex, for example:

class="columns is-desktop is-vcentered"

then you get display:flex from is-desktop and now suddenly is-vcentered works as intended.

Also I think the semantics is off since is-vcentered suggests that it is columns that gets vertically centered. But what it actually does (from source):

.columns.is-vcentered {
  -webkit-box-align: center;
     -ms-flex-align: center;
        align-items: center;
}

is to make children of columns to be vertically centered inside columns. So you likely also need to set a height of your columns element for this to work.

I think is-vcentered should be named something like has-vcentered-content, but perhaps I'm missing something obvious.

tl;dr; Add height and flex to the columns-element for is-vcentered to do something.

Sorry, I guess this is more of a extrapolation of the problem and not a solution.

I believe the real solution is probably to use the existing hero-class here. (Which by the way centers manually using paddings, just like in Peter Leger's answer!).