How to vertically and horizontally center some content the Bulma way?

Question

I would like to center content both horizontally and vertically and I would like to do it the "bulma way" (without adding extra CSS). My example is working but I feel it's "hacky".

Here is the best I have achieved

html,
body,
.container,
.section {
  height: 100%;
}

.column {
  flex-direction: column;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" rel="stylesheet" />

<section class="section">
  <div class="container is-flex">
    <div class="column is-flex has-text-centered">
      <div class="box">
        My content
      </div>
    </div>
  </div>
</section>

Candlewood

what's your question? it seems to be working – Recitation

It is but I feel like it's a hacky way – Candlewood

@Roman Use is-vcentered class in html – Cherriecherrita

Thanks @MehrajKhan, it definitely feels less hacky although I still think some improvements could be made. – Candlewood

Answer 1

Edit: I found the solution using the hero helper in the Bulma docs

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />

<section class="hero is-fullheight">
  <div class="hero-body has-text-centered">
    <div class="container">
      <div class="box">
        My content
      </div>
    </div>
  </div>
</section>

Candlewood