我觉得.columns在默认情况下没有display:flex;有点滑稽（它应该有吗？）。无论如何，如果你使用一些添加flex的东西，例如：

class="columns is-flex is-vcentered"

然后你从is-desktop得到display:flex，现在突然is-vcentered按预期工作了。
另外，我认为语义是错误的，因为is-vcentered表明它是columns，垂直居中。但它实际上是做什么的（从源代码）：

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

就是让columns的子元素在columns中垂直居中，所以你可能还需要设置columns元素的高度。
我认为is-vcentered应该命名为类似has-vcentered-content的名称，但也许我忽略了一些明显的东西。

tl;dr;将height和flex添加到columns-元素，以便is-vcentered执行某些操作。

对不起，我想这更多的是对问题的推断，而不是解决方案。
我相信真实的的解决方案可能是使用现有的hero-class。（顺便说一下，它集中手动使用填充，就像Peter Leger的答案一样！）

更新：我是在谷歌上搜索.content类而不是.column类中垂直对齐项目的方法，其他人可能会出于同样的原因偶然发现这个地方。
如果你想在.content类中垂直对齐元素，我是这么做的：

.content.is-vcentered {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* used this for multiple child */
  align-items: center; /* if an only child */
}

注意：这对于具有固定高度的div非常有用。
下面是它处理的一个html结构示例

<div class="content is-vcentered has-text-centered">
  <h1>Content</h1>
  <p>that might be from</p>
  <p>wysiwyg containing</p>
  <p>multiple lines</p>
</div>

<div class="content is-vcentered">
  <p>Some text line</p>
</div>

下面是jsfiddle示例

列未垂直居中，因为您已为节使用了高度。使用****填充可增加*******高度。
删除类.section（在Bulma中）

.section {
  background-color: white;
  padding: 3rem 1.5rem;
}

用你自己的填充物。

• • 示例**

x一个一个一个一个x一个一个二个x

• • 附言**

您可以使用.columns is-vcentered两次。在这种情况下，您可以设置截面的高度。
一个三个三个一个

只需在div.columns上添加.is-flex类，.is-centered和.is-vcentered都将可用（Bulma v.0.7.1）：
https://bulma.io/documentation/modifiers/responsive-helpers/
下面是一个完整的工作示例，其中一个组件位于屏幕中央：

<template>
  <div class="columns is-flex is-vcentered is-centered"> 
    <div class="column is-two-thirds-mobile is-half-tablet">
        <Login />
    </div>
  </div>
</template>

您还可以嵌套列，效果与下面演示的相同：Nesting columns.

有点晚了，但我认为在这种情况下最好的解决方案是使用margin: auto;。