将el-card放在页面中间怎么设置
时间: 2024-01-07 19:03:11 浏览: 410
CSS常见的让元素水平居中显示的方法
可以使用CSS的flex布局来将el-card放在页面中间,具体的实现方法如下:
HTML代码:
```
<div class="container">
<el-card>
<!-- el-card的内容 -->
</el-card>
</div>
```
CSS代码:
```
.container {
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
height: 100vh; /* 设置容器高度为视口高度 */
}
```
这样就可以将el-card放在页面的中间了。注意,这种方式需要将el-card的外层容器设置为flex布局,且需要设置容器的高度为视口高度,否则可能无法实现居中效果。
阅读全文