对话框 footer居中

要让对话框的 footer 居中，可以为其父元素（通常是对话框的最外层容器）设置以下样式：

display: flex;
justify-content: center;
align-items: center;

这样，对话框的 footer 就会水平和垂直居中了。如果想只让 footer 水平居中，可以将 `align-items: center;` 改为 `align-items: flex-start;`。

相关问题

juery 登录框居中

在jQuery中创建一个居中的登录弹窗可以按照以下步骤完成：

1. 首先，我们需要创建HTML结构，包括登录表单和一个用于弹出对话框的触发元素（如登录按钮）。示例代码如下：

<button id="loginBtn">登录</button>
<div id="dialog" class="modal hide fade">
    <div class="modal-header">
        <h3>登录</h3>
    </div>
    <div class="modal-body">
        <form>
            <!-- 登录表单内容 -->
        </form>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">取消</a>
        <a href="#" class="btn btn-primary">登录</a>
    </div>
</div>

2. 使用CSS来设置模态对话框的样式，使其居中显示并添加遮罩效果。你可以使用`.modal`类来覆盖Bootstrap的样式，也可以自定义。例如：

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.5); /* 遮罩颜色 */
}

/* 添加滚动禁用 */
body.modal-open {
    overflow: hidden; /* 阻止页面滚动 */
}

3. 最后，在JavaScript中绑定事件处理函数，当点击登录按钮时显示对话框，关闭时隐藏对话框：

$(document).ready(function(){
    $("#loginBtn").click(function(e){
        e.preventDefault(); // 阻止默认行为
        $("#dialog").modal('show'); // 弹出对话框
    });

    $('.modal').on('hidden.bs.modal', function(){
        $('body').removeClass('modal-open'); // 关闭时移除滚动禁用
    });
});

这样，每次点击登录按钮时，对话框会居中显示，关闭时背景会变暗，且页面滚动会被阻止。

el-dialog底部按钮居中

你可以使用 flex 布局将 el-dialog__footer 中的按钮居中。具体步骤如下：

1. 给 el-dialog__footer 添加一个类名，比如 center。

2. 在样式文件中添加如下代码：

.el-dialog__footer.center {
  display: flex;
  justify-content: center;
}

3. 在 el-dialog 中添加 center 类名即可：

<el-dialog :visible="dialogVisible" class="center">
  <!-- 对话框内容 -->
  <div slot="footer">
    <!-- 底部按钮 -->
  </div>
</el-dialog>