uniapp 页面元素水平垂直居中

在uniapp中如何让一个源码在页面中水平垂直居中？可添加如下操作：

在App.vue添加如下代码设置页面宽度100%显示

page {
    width: 100%;
    height: 100%;
}
uni-page-body,#app{
 height: 100%;
} 

在你要居中的页面添加

<template>
    <view class="center">
        <view class="container">
        </view>
    </view>
</template>

<style lang="scss">
.center {
    height: 100%;
    flex: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.container {
    width: 96px;
    height: 96px;
    background: red;
}
</style>

效果如下