1.效果图
图中的‘知道了‘所在的外层就是一个<right></right>，这个div的高度自适应的，实现要求：‘知道了’在正中间。
// 注意：这里用的模板语言是pug和stylus的，.right就是<right></right>，如果看不懂可以看我的这篇Pug和
stylus用法
2.实现代码
<template lang="pug">
.right(@click="clickSure()")
span 知道了
</template>
<style scoped lang="stylus">
.right
flex 1
display flex
flex-direction column
justify-content center
span
width 100%
height 34px
line-height 34px
font-size:16px;
font-weight:400;
color #1790ED
text-align center
</style>
3.实现核心
1.外层设置为display flex和flex 1，这样高度和宽度是占满的，因为<right></right>的父布局也是自适应的，而图中的Dialog设置了minheight 20%,所以，<right></right>的父布局会占满20%+里面剩下的，<right></right>也就是自适应的了。
2.基于第一点，<right><right>再设置justify-content center，整个span就会在div里面居中显示了,flex-direction coulumn其实要不要都可以。
总结就是span在div竖向居中的核心代码
flex 1
display flex
justify-content content
3.最后为了保险，还要让span的文字自己内部也居中。
1.设置text-align center,2.让height和line-height相等。
span内部文字居中核心代码是：
text-align center
height 30px
line-height 30px
上面的30px是任意设置的，你看你ui给的图的height是多少，line-height设置一样就行了。
