如何实现ElementUI的transfer穿梭框在el-card卡片内居中对齐

核心通过flex布局实现el-card内部穿梭框的居中效果，无需修改原有组件结构和业务逻辑，兼容性适配你当前使用的ElementUI 1.3.7版本。

场景1：仅当前卡片生效（推荐，不影响其他页面的卡片样式） #

1. 给el-card添加自定义类名：

<el-card class="transfer-card">
  <!-- 原有el-transfer代码保持不变 -->
  <el-transfer v-model="value3"  :left-default-checked="[2, 3]" :right-default-checked="[1]" :titles="['Source', 'Target']" :button-texts="['to left', 'to right']" :footer-format="{
      noChecked: '${total}',
      hasChecked: '${checked}/${total}'
    }" @change="handleChange" :data="data">
    <el-button class="transfer-footer" slot="left-footer" size="small">OP</el-button>
    <el-button class="transfer-footer" slot="right-footer" size="small">OP</el-button>
  </el-transfer>
</el-card>

2. 新增CSS规则：

/* 仅实现水平居中添加以下配置即可 */
.transfer-card .el-card__body {
  display: flex;
  justify-content: center;
}

/* 如果需要同时实现垂直居中，补充以下配置即可，高度可根据实际需求调整 */
/*
.transfer-card .el-card__body {
  min-height: 600px;
  align-items: center;
}
*/

场景2：全局所有el-card内部元素都居中 #

直接新增全局CSS规则即可：

.el-card__body {
  display: flex;
  justify-content: center;
}

你原有自定义的穿梭框面板宽度、列表高度样式不会受上述修改影响，可正常生效。

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