el-card body水平垂直居中
时间: 2023-09-13 20:03:17 浏览: 495
图片的水平垂直居中
4星 · 用户满意度95%
要实现 el-card body 水平垂直居中,可以通过以下步骤进行操作:
1. 在 el-card 的外层包裹一个父容器,例如一个 div 元素,给该父容器设置以下 CSS 样式:
```css
.container {
display: flex;
justify-content: center;
align-items: center;
}
```
这将使父容器成为一个 flex 容器,并将其子元素水平和垂直居中。
2. 将 el-card 放置在父容器内,如下所示:
```html
<div class="container">
<el-card>
<!-- card content -->
</el-card>
</div>
```
通过这种方式,el-card 的 body 内容将在父容器中水平垂直居中显示。你可以根据需要调整父容器的样式以适配你的设计。
阅读全文