### Vue3 中使用 Element Plus 实现表单项内容居中 为了实现 `el-form-item` 的内容居中显示，在样式控制方面可以利用 CSS Flexbox 布局模型来达到理想效果。通过自定义类名并应用特定的样式规则，能够确保即使在不同屏幕尺寸下也能保持良好的视觉一致性。 对于希望让整个表单项目中的标签和控件都处于水平中心位置的情况，可以在包裹 `<el-form>` 或者具体到每一个 `<el-form-item>` 上添加额外的 class 来覆盖默认行为： ```css .centered-form-item { display: flex; justify-content: center; /* 将子元素沿主轴方向（通常是横向）居中 */ align-items: center; /* 让子元素沿着交叉轴方向（通常为纵向）也居中 */ } ``` 当需要仅针对某个具体的输入框或其他类型的字段做特殊处理时，则可以直接在这个组件上附加上述样式的 class 名称即可完成操作。以下是完整的 HTML 和 JavaScript 示例代码片段用于创建一个具有居中式布局的简单登录界面[^1]。 ```html <template> <div id="app"> <!-- 使用 custom-class 属性指定外部样式 --> <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" size="large"> <el-form-item label="用户名：" prop="username" class="centered-form-item"> <el-input v-model="ruleForm.username"></el-input> </el-form-item> <el-form-item label="密码：" prop="password" class="centered-form-item"> <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input> </el-form-item> <el-form-item style="text-align:center;"> <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button> <el-button @click="resetForm('ruleForm')">重置</el-button> </el-form-item> </el-form> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; export default defineComponent({ setup() { const ruleForm = reactive({ username: '', password: '' }); function submitForm(formName:string){ console.log(`Submit ${formName}`); } function resetForm(formName:string){ console.log(`Reset ${formName}`); } return{ ruleForm, rules:{}, submitForm, resetForm }; }, }); </script> <style scoped> /* 定义局部作用域内的样式 */ .centered-form-item .el-form-item__content { width: 100%; } @media screen and (min-width:768px) { .centered-form-item { max-width: 400px; margin-left:auto; margin-right:auto; } } </style> ``` 此示例展示了如何结合 Vue3 及其组合 API 特性与 Element Plus 组件库一起工作，从而构建响应式且美观的应用程序界面。值得注意的是，这里还引入了一个媒体查询条件以优化较大视窗下的用户体验[^2]。