Foundation 5如何实现列垂直居中？align-middle类无法生效

嘿，我来帮你搞定这个问题！首先得说清楚：align-middle是Foundation 6及以后版本才加入的内置类，所以在Foundation 5里用它肯定没效果啦。不过别担心，有两种简单的方法能实现你要的垂直居中效果：

方法一：用Flexbox（首推！） #

Foundation 5的.row默认是普通块级布局，我们给它加个Flex属性就能轻松让子列垂直居中：

1. 先给目标.row加个自定义类，比如flex-center-row：

<div class="row flex-center-row">
  <div class="small-6 columns">
    I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
  </div>
  <div class="small-6 columns">center me</div>
</div>

2. 然后加几行CSS样式：

.flex-center-row {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

这个方法兼容性不错（IE10及以上都支持），代码又简洁，完全不影响Foundation原本的响应式特性，小屏幕下列还是会正常堆叠，非常实用。

方法二：用表格布局（兼容老浏览器） #

如果你需要兼容IE9这种比较老的浏览器，可以试试表格布局的方式：

1. 同样给.row加个自定义类，比如table-center-row：

<div class="row table-center-row">
  <div class="small-6 columns">
    I am as well, but I have so much text I take up more space! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere ducimus earum minus, inventore, ratione doloremque deserunt neque perspiciatis accusamus explicabo soluta, quod provident distinctio aliquam omnis? Labore, ullam possimus.
  </div>
  <div class="small-6 columns">center me</div>
</div>

2. 对应的CSS样式要注意覆盖Foundation列默认的浮动：

.table-center-row {
  display: table;
  width: 100%;
}
.table-center-row .columns {
  display: table-cell;
  vertical-align: middle;
  float: none; /* 必须去掉默认的float，表格布局才会生效 */
}

这个方法虽然代码稍多一点，但能完美兼容更老的浏览器，按需选择就好。

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