Bulma Tile内“Add New”文本及图标居中问题及相关疑问

一、最后一个Tile内容垂直水平居中的实现 #

直接用Bulma内置的Flex工具类即可，无需自定义内联样式，步骤如下：

• 给包裹"Add New"内容的容器（如<a>标签）添加 is-flex、flex-direction-column、justify-content-center、align-items-center 类
• 给所有tile的父级容器添加 is-fullheight 类，确保所有tile高度统一
• 移除之前尝试的多余类（如单独给文本加的has-text-centered，Flex布局已能实现整体居中）

示例代码：

<!-- 父级tile容器 -->
<div class="tile is-ancestor is-fullheight">
  <!-- 其他产品tile -->
  <div class="tile is-parent">
    <a href="/product/1" class="tile is-child box">
      <h4 class="title is-4">产品1</h4>
      <!-- 产品详情内容 -->
    </a>
  </div>
  <!-- 最后一个Add New tile -->
  <div class="tile is-parent">
    <a href="/add-product" class="tile is-child box is-flex flex-direction-column justify-content-center align-items-center">
      <h4 class="title is-4">Add New</h4>
      <i class="fas fa-plus fa-3x"></i>
    </a>
  </div>
</div>

二、疑问解答 #

1. 加号图标相对h4居中的原因 #

h4是块级元素，默认宽度占满父容器，而加号图标是行内块元素，若父容器有文本居中样式（比如之前加的has-text-centered），图标会继承该样式实现水平居中；但垂直方向只是跟随文本流排在h4下方，并非真正的垂直居中。

2. 内联Flex样式是否会和Bulma冲突？ #

不建议使用内联样式，Bulma提供了完善的Flex工具类（如is-flex、justify-content-center等），这些类是框架原生支持的，不会和其他Bulma样式冲突，且更符合框架规范，便于后续维护。

3. 内容更少的第二个tile占用更多垂直空间？ #

这是因为Bulma的tile布局默认高度由内容决定，若父容器未设置is-fullheight，部分tile可能因内部元素的margin/padding或布局规则导致高度计算异常。给父级tile容器添加is-fullheight类，强制所有子tile高度一致，即可解决该问题。

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