uni-app 页面元素水平垂直居

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

效果如下

这篇好文章是转载于：学新通技术网