在uniapp中如何让一个源码在页面中水平垂直居中？可添加如下操作：
在App.vue添加如下代码设置页面宽度100%显示
page {
width: 100%;
height: 100%;
}
uni-page-body,#app{
height: 100%;
}
在你要居中的页面添加文章来源：https://www.toymoban.com/news/detail-551380.html
<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>
效果如下
文章来源地址https://www.toymoban.com/news/detail-551380.html
到了这里，关于uniapp 页面元素水平垂直居中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
