css - 如何在 Bulma 中垂直居中元素？

Question

如何垂直居中 <div class="columns is-vcentered">到包围它的那个红色部分？

我应该在这里删除或添加一些类来改进这段代码吗？请建议我。谢谢!

我是 CSS 框架的新手，从未尝试过 Bootstrap，而是选择了 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>

在 CSS 中除了给元素着色，我只做了这个:

section {
    height: 70vh;
}

Answer 1

我认为 .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 的 child 在 columns 中垂直居中。因此，您可能还需要设置 columns 元素的高度才能使其正常工作。

我认为 is-vcentered 应该命名为 has-vcentered-content，但也许我遗漏了一些明显的东西。

tl;博士;为 is-vcentered 的 columns 元素添加 height 和 flex 来做一些事情。

抱歉，我想这更多是对问题的推断，而不是解决方案。

我相信真正的解决方案可能是使用现有的 hero-class这里。 (顺便说一下，使用填充手动居中，就像 Peter Leger 的回答一样!)。