Bulma: How do you center a button in a box?

Yes, there is a native way.

Bulma offers has-text-centered class for centering text, inline and inline-block elements.

You can use following code:

<div class="box has-text-centered">
  <button class="button">Center me</button>
</div>

Demo:

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.2/css/bulma.css" rel="stylesheet"/>
<div class="box has-text-centered">
 <button class="button">Center me</button>
</div>

You can also try:

<div class="columns is-centered">
    <div class="column is-half">
        <button class="button">Center me</button>
    </div>
</div>

Tags:

Html

Css

Bulma