uni-app subNVues居中
时间: 2023-07-07 19:14:37 浏览: 81
要实现 `uni-app` 中 `subNVues` 居中,可以通过以下步骤:
1. 在 `index.vue` 中使用 `flex` 布局,将 `subNVues` 的父元素设置为 `flex` 容器,并使用 `justify-content` 和 `align-items` 属性将其子元素居中。
```vue
<template>
<div class="container">
<sub-nvue></sub-nvue>
</div>
</template>
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
```
2. 在 `sub-nvue.vue` 中设置 `flex: 1` 属性,使其自身充满父容器,并使用 `text-align: center` 属性将其内容居中。
```vue
<template>
<div class="sub-nvue-container">
<div class="sub-nvue-content">
<!-- sub-nvue content -->
</div>
</div>
</template>
<style>
.sub-nvue-container {
flex: 1;
}
.sub-nvue-content {
text-align: center;
}
</style>
```
这样就可以实现 `subNVues` 的居中了。