How to make ElementUI transfer aligned center

Question

I'm using ElementUI, and would like to put transfer inside card and aligned center.

https://jsfiddle.net/ca1wmjLx/

How can I do this?

HTML

    <script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.3.7/lib/index.js"></script>
<div id="app">
<template>
<el-card>
  <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>
</template>
</div>

JS

var Main = {
    data() {
      const generateData = _ => {
        const data = [];
        for (let i = 1; i <= 15; i++) {
          data.push({
            key: i,
            label: `option ${ i }`,
            disabled: i % 4 === 0
          });
        }
        return data;
      };
      return {
        data: generateData(),
        value3: [1]
      };
    },

    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys);
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

CSS

@import url("//unpkg.com/element-ui@1.3.7/lib/theme-default/index.css");
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }

.el-transfer-panel {
  width: 30%;
}

.el-transfer-panel__body {
  height: 500px;
}

.el-transfer-panel__list.is-filterable {
  height: 468px;
}

====TO SOLVE==== ===It looks like your post is mostly code; please add some more details.=== I'm using ElementUI, and would like to put transfer inside card and aligned center. I'm using ElementUI, and would like to put transfer inside card and aligned center. I'm using ElementUI, and would like to put transfer inside card and aligned center. I'm using ElementUI, and would like to put transfer inside card and aligned center.

Answer 1

use % width only on container which is parent element, mostly I would recommend you to use percentages size for only 100%, to align on the full screnn, below 100% sizes as and currently on width it is risky because your layout will be dropped,I just changed your 30% to 250px, and aligned on center by using flex

.el-transfer-panel {
  width: 250px;
}

.el-card{
  display: flex;
  align-items:  center;
  justify-content: center;
}

For LIVE view visit JSFIDDLE