element栅栏布局，怎样让col内的元素垂直居中，是否有简便的方式？

Question

刚接触element-ui，想让col里的元素居中，官方文档中只有row有flex布局，col内的怎样实现？

<el-row type="flex">
    <el-col
    :span="2"
    >
        <el-switch
        v-model="flag"
        active-color="#13ce66"
        inactive-color="#ff4949"
        ></el-switch>

    </el-col>
</el-row>

Answer 1

这就是居中的问题，方法很多 css居中笔记
例如：switch开关这个div的父元素设置flex，这里伪代码假设.parent就是父元素：

.parent{
  display:flex;
  justify-content:center;/*主轴上居中*/
  align-items:center;/*侧轴上居中*/
}

Answer 2

今天我也遇到了，element-ui的方法也可以解决。
现在在el-row中 添加 type="felx"， 再用 align = "middle"就可以了

<el-row 
  :gutter="20"
  type="flex"
  align="middle">
      <el-col :span="10" :offset="0">
        <img :src=userImg alt="用户头像">
      </el-col>
    <el-col :span="8" :offset="0">
          <h2>{{userName}}</h2>
          <div>{{userLevel}}</div>
    </el-col>
  </el-row>
...