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

1.效果图

图中的‘知道了‘所在的外层就是一个，这个div的高度自适应的，实现要求：‘知道了’在正中间。
// 注意：这里用的模板语言是pug和stylus的，.right就是，如果看不懂可以看我的这篇Pug和
stylus用法
2.实现代码

3.实现核心
1.外层设置为display flex和flex 1，这样高度和宽度是占满的，因为的父布局也是自适应的，而图中的Dialog设置了minheight 20%,所以，的父布局会占满20%+里面剩下的，也就是自适应的了。
2.基于第一点，再设置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设置一样就行了。