Sizing and centering box element in Bulma

Question

I have a login modal in which I have a box, with the following CSS structure:

<div class="modal" v-bind:class="{ 'is-active': isActive }">
    <div class="modal-background">
    </div>
    <div class="modal-content">
        <div class="box">
            // content 
            // content 
            // content 
        </div>
    </div>
</div>

I want to change the size of my box to a certain width. If I set for example .box { width: 600px }; the box size grows, but it doesn't automatically center itself -- the width just gets added on to the right. Is there any way I can change the box size, while keeping it horizontally centered?

Answer 1

All you have to do is wrap the box inside a column. And give the column which ever size you need the box to be.

<div className="column is-one-third">
      <div className="box">
      </div>
</div>