How do I vertically align elements inside a centered column, using Bulma? - css

Question

How do I vertically align elements inside a centered column using Bulma?
current results:
My code:
<template>
<div id="dataFetcher" class="box">
<h1 class="block">Data Fetcher</h1>
<div class="columns is-vcentered is-centered">
<div id="123" class="column has-background-success is-half">
<input type="text" class="">
<button type="button" :class="{ 'is-loading': isLoading } " class="block button is-vcentered" #click="fetchData">Fetch data</button>
</div>
</div>
</div>
</template>
Thinking:
I've used a .columns .is-centered div to center horizontally. Check.
But for vertical alignment, .columns .is-vcentered isn't the answer because it requires two separate columns (which feels like the wrong approach to me?).
Other references I've seen imply using .is-flex .is-align-items-center to get some Flexbox action going, but putting that on or inside the column div breaks the horizontal alignment from .columns.

Answer 1

It helps if the text input has a class of input, then I would put the fields into a horizontal field container:
<template>
<div id="dataFetcher" class="box">
<h1 class="block">Data Fetcher</h1>
<div class="columns is-vcentered is-centered">
<div id="123" class="column has-background-success is-narrow">
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<p class="control">
<input type="text" class="input">
</p>
</div>
<div class="field">
<p class="control">
<button type="button" class="button">Fetch data</button>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</template>