当前位置：首页 > 前端教程

elementui居中

2026-03-06 01:08:17前端教程

ElementUI 实现居中的方法

ElementUI 是一个基于 Vue.js 的组件库，实现居中布局可以通过以下几种方式：

水平居中

使用 el-row 和 el-col 组件结合布局，设置 justify 属性为 center：

<el-row justify="center">
  <el-col :span="8">
    <!-- 内容 -->
  </el-col>
</el-row>

垂直居中

使用 CSS Flexbox 布局，设置父容器样式：

<div style="display: flex; align-items: center; height: 100vh;">
  <el-button>居中按钮</el-button>
</div>

水平垂直居中

结合 Flexbox 的 justify-content 和 align-items 属性：

<div style="display: flex; justify-content: center; align-items: center; height: 100vh;">
  <el-card style="width: 300px;">
    <!-- 卡片内容 -->
  </el-card>
</div>

使用 el-dialog 居中

ElementUI 的对话框组件默认居中显示，无需额外配置：

<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
  <span>内容</span>
</el-dialog>

文本居中

在 ElementUI 组件内部使用 text-align: center：

<el-card>
  <div style="text-align: center;">
    <p>居中文本</p>
  </div>
</el-card>

表单居中

使用 el-form 结合自定义样式实现表单居中：

<el-form :model="form" style="width: 50%; margin: 0 auto;">
  <el-form-item label="用户名">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
</el-form>

以上方法可以根据具体场景选择使用，Flexbox 布局是最灵活的方式。

elementui居中