elementui中实现el-row中的el-col垂直居中显示

在Element UI中，要实现el-row中的el-col垂直居中显示，可以使用Flex布局的特性。Element UI的el-row默认使用了Flex布局，其属性type默认值为"flex"。

以下是实现垂直居中的示例代码：

<template>
  <el-row type="flex" class="row-bg" justify="center" align="middle">
    <el-col :span="6"><div class="grid-content bg-purple">垂直居中</div></el-col>
  </el-row>
</template>
 
<style>
.el-row {
  height: 300px; /* 设置行的高度 */
}
.el-col {
  border-radius: 4px;
  background: #fff;
  border-left: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

在这个例子中，el-row的type属性设置为flex（这是默认值），justify属性用于设置主轴对齐方式（center表示居中），align属性用于设置交叉轴对齐方式（middle表示居中）。这样就可以实现el-col在el-row内垂直居中的效果。