uniapp中css上下居中是?
时间: 2023-07-09 18:46:32 浏览: 175
uni-app自定义组件之菜单左右滑动并点击切换选中居中显示.zip
在 Uniapp 中,可以使用 flex 布局来实现上下居中。具体实现方式如下:
1. 在父容器上设置 `display: flex;` 和 `align-items: center;`,表示子元素垂直居中对齐。
2. 在子元素上设置 `margin: auto;`,表示子元素水平居中对齐。
示例代码如下:
```html
<template>
<div class="container">
<div class="item">这是一个居中的元素</div>
</div>
</template>
<style>
.container {
display: flex;
align-items: center;
height: 100vh; /* 父容器高度需要设置 */
}
.item {
margin: auto;
}
</style>
```
阅读全文