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

效果如下
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐