解决微信小程序cover-view组件内文本居中问题

引言

微信小程序中的map组件优先级较高，其子节点只允许是部分标签（如cover-view），但cover-view和view组件不一样，flex布局在cover-view中不管用，在pc端微信小程序开发工具中可以正常显示flex布局，但使用真机时所有flex布局失效，因此需要技巧以实现cover-view中文本居中。
下面这个简单的程序在真机上布局混乱：

<!--wxml-->
<map>
    <cover-view class="cvcls">请把我居中</cover-view>
</map>

/*wxss*/
.cvcls{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

文本水平居中

这个非常简单，使用CSS的text-align属性即可：

<!--wxml-->
<map>
    <cover-view class="cvcls">请把我居中</cover-view>
</map>

/*wxss*/
.cvcls{
    text-align: center;
}

文本竖直居中

查阅Cover-view官方文档:

唯一一个可以在cover-view组件内被嵌套的原生html组件是button！
思路非常简单，button内的文本都是水平竖直居中的，因此我们可以在cover-view内100%嵌套一个button组件，将文本包含于button组件内即可解决竖直居中问题：

<!--wxml-->
<map>
    <cover-view class="cvcls">
        <button class="btncls">请把我居中</button>
    </cover-view>
</map>

/*wxss*/
.cvcls{
    /*此处填充cover-view组件的位置布局*/
    /*可以补充背景颜色、字体颜色等*/
}
.btncls{
    position: absolute;
    left: 0%;
    top: 0%;
    width: 0%;
    height: 0%;
    /*button组件是自动居中的，如果不放心可以加上text-align: center;*/
    /*可以补充背景颜色、字体颜色等*/
}