el-dialog垂直
时间: 2023-10-04 09:06:03 浏览: 36
要让 `el-dialog` 垂直居中,可以使用以下 CSS 样式:
```
.el-dialog__wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.el-dialog {
margin: 0;
}
```
这里使用了 Flexbox 布局,将 `.el-dialog__wrapper` 设置为弹性容器,使其内部的 `.el-dialog` 元素可以在垂直和水平方向上居中。同时,为了去掉默认的 margin,还需要将 `.el-dialog` 元素的 margin 设置为 0。
需要注意的是,这种方式只适用于 `el-dialog` 的默认大小。如果弹窗大小发生变化,可能需要调整样式。
相关问题
el-dialog垂直居中
可以通过设置 el-dialog 的样式来实现垂直居中,具体方法如下:
1. 设置 el-dialog 的样式为 display: flex; 和 align-items: center;,这样就可以实现垂直居中。
2. 如果需要水平居中,可以再加上 justify-content: center;。
示例代码如下:
```
<el-dialog :visible.sync="dialogVisible" class="dialog-wrapper">
<div class="dialog-content">
<!-- 对话框内容 -->
</div>
</el-dialog>
<style>
.dialog-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.dialog-content {
/* 对话框内容的样式 */
}
</style>
```
el-dialog水平垂直居中
el-dialog可以通过添加自定义样式来实现水平垂直居中。你可以给el-dialog的父级元素添加一个class,并将该class的top属性设置为50%和transform属性设置为translateY(-50%)来使其垂直居中。可以参照以下代码示例:
```html
<template>
<div>
<el-dialog title="标题" :visible.sync="dialogVisible" custom-class="center-dialog">
<div class="content"></div>
</el-dialog>
</div>
</template>
<style>
.center-dialog {
top: 50%;
transform: translateY(-50%);
}
</style>
```