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-flex 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!).