Bulma中的尺寸和定心盒元件

我有一个登录模式，其中有一个框，具有以下CSS结构：

<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>

//内容
//内容
//内容

---

我想把盒子的大小改成一定的宽度。例如，如果我设置

.box{width:600px}长方体的大小会增加，但不会自动居中——宽度只是添加到右边。有什么方法可以改变盒子的大小，同时保持它水平居中吗？
我没有遇到过这样做的任何形式。
另一种解决方法是使用列

.columns
    .column.is-one-quarter
        .box One quarter
    .column.is-one-quarter 
        .box One quarter This box would have a reduced size, for it is contained in 1 quarter
    .column.is-one-quarter 
        .box One quarter

签出此链接
只需将框包装在列中即可。并给出你所需要的框大小的列

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