Vue实现span在div中竖向局中。

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设置一样就行了。