在Bulma中实现三分之五宽度section水平居中的最优方法

嘿，这问题我熟！你现在的困扰出在Bulma的columns容器默认对齐逻辑上——它默认是左对齐（justify-content: flex-start），所以哪怕你只放了一个is-three-fifths的column，它也会贴在屏幕左侧，不会自动居中。

最优解决方案完全不需要额外写自定义CSS，直接用Bulma原生的修饰符就能搞定：给外层的columns容器加上is-centered类就行！

修改后的完整代码 #

.section{ border: 1px solid; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css" rel="stylesheet" />
<div class="columns is-centered">
  <div class="column is-three-fifths">
    <section class="section">
      <div class="container">
        <figure class="image is-128x128">
          <img src="https://bulma.io/images/placeholders/256x256.png">
        </figure>
      </div>
    </section>
  </div>
</div>

原理说明 #

Bulma的is-centered修饰符会给columns容器设置justify-content: center，这样里面的column元素就会在水平方向上居中对齐，同时完美保留你想要的is-three-fifths宽度，完全贴合你的需求。

如果你不想用columns布局，也可以直接给section设置margin: 0 auto，同时配合Bulma的is-three-fifths类（需要确保section是block级元素，Bulma的section默认就是），不过相比之下，用columns is-centered的方式更贴合Bulma的组件设计思路，代码也更简洁规范。

内容的提问来源于stack exchange，提问作者user9644796