el-row 垂直居中

`el-row` 是 Element UI 中的一个组件，用于创建响应式的网格布局。当涉及到垂直居中 `el-row` 内的子元素时，你可以使用 CSS 样式或者结合 Vue 的 Flexbox 特性来实现。

1. **CSS 方法**：
在 `.el-row` 类上设置 `display: flex;` 来启用 Flexbox，然后为其中的 `.el-col`（栅格单元）添加 `align-items: center;` 和 `justify-content: center;`，这样就可以使其垂直和水平都居中对齐了。

.el-row {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.el-col {
  align-self: center; /* 仅垂直居中，如果不需要水平居中则可移除 */
}

2. **Vue Flexbox** (假设你在 .row 元素内部有一个 .cell 子组件):

<template>
  <div class="el-row">
    <el-col :class="{ cellCenter: true }" v-for="(item, index) in items" :key="index">
      <your-cell-component :data="item" />
    </el-col>
  </div>
</template>

<style scoped>
.cellCenter {
  align-self: center; /* 或者 use align-items for all cols */
  justify-self: center;
}
</style>

在上述代码中，`.cellCenter` 类应用了 Flexbox 属性，并且在每个 `.el-col` 上动态地应用这个类来达到垂直和水平居中效果。