Vertically center el-row in div (ElementUI)

I am using ElementUI for the grid system of an application. I need to vertically center a on a Div. When using flexbox in the parent container of the the el-row style breaks. This is how the div that I want to center vertically looks like: https://i.stack.imgur.com/WtGv0.png

<template>
  <div class="endPage">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="12">
        <div  style="text-align: center;  background-color:rgb(179, 160, 160)" class="grid-content">
          1
        </div>
      </el-col>
      <el-col :span="12">
        <div style="text-align: center; background-color:rgb(179, 160, 160)" class="grid-content">
          2
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Botones"
};
</script>

<style scoped>
.endPage {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: rgb(216, 37, 37);
  height: 100px;`enter code here`
}
</style>

I greatly appreciate your help.