uniapp page elements are centered horizontally and vertically

How to center a source code horizontally and vertically on the page in uniapp? The following operations can be added:

Add the following code in App.vue to set the page width to 100% display

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

On the page you want to center add

<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>

The effect is as follows