How to centre elements in Bulma? (vertically and horizontally)

Bulma is a CSS framework that provides a set of classes for quickly creating responsive and customizable layouts. The flex classes in Bulma are used to create flexible, responsive, and easily alignable elements.

The main class for flex elements is is-flex, which creates a flex container. This class can be applied to any element, such as a div, to make its child elements flex.

You can easily centre elements in Bulma. You can center elements by using the is-centered class on the parent container. For example, if you have a div element that you want to center, you can give it a class of is-centered and all of its child elements will be centered within it.

Additionally, you can use has-text-centered class on specific element to center the text.

<div class="is-centered">
  <p class="has-text-centered">I am centered</p>
</div>

Center an element vertically

You also can center element vertically by using is-flex and is-vcentered classes

<div class="is-flex is-vcentered">
  <p>I am vertically centered</p>
</div>

Center an element horizontally

<div class="is-flex is-centered">
  <p>I am horizontally centered</p>
</div>

Both Vertically and Horizontally Centered

<div class="is-flex is-vcentered is-centered">
  <p>I am both vertically and horizontally centered</p>
</div>

Alternatively, you can use class is-align-center instead of is-centered in the last example to centre elements in Bulma.

<div class="is-flex is-vcentered is-align-center">
  <p>I am both vertically and horizontally centered</p>
</div>