### 实现 `<el-form>` 在 `<el-main>` 中水平和垂直居中 为了在 Element UI 的 `<el-main>` 容器中让 `<el-form>` 内容既水平又垂直居中，可以采用 Flexbox 布局方式。以下是具体实现方法： #### HTML 结构 ```html <el-container> <el-main> <el-form :model="form" class="centered-form"> <!-- 表单内容 --> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> </el-form> </el-main> </el-container> ``` #### CSS 样式 通过设置 `.el-main` 和 `.centered-form` 的样式来实现居中效果。 ```css .el-main { display: flex; /* 启用Flex布局 */ justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100%; /* 确保高度占满父容器 */ } .centered-form { width: 400px; /* 设置表单宽度以便更好地控制布局 */ } ``` 以上代码片段实现了以下功能： - 使用 `display: flex` 将 `<el-main>` 转换为弹性盒子[^1]。 - 利用 `justify-content: center` 让子元素（即 `<el-form>`）在主轴方向上水平居中[^1]。 - 利用 `align-items: center` 让子元素在交叉轴方向上垂直居中[^1]。 如果需要进一步调整间距或其他样式，可以通过自定义类名扩展样式[^2]。 --- #### Vue 组件实例 下面是一个完整的 Vue 组件示例，展示如何将上述逻辑集成到实际项目中。 ```vue <template> <el-container> <el-main> <el-form :model="form" class="centered-form"> <el-form-item label="用户名"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input v-model="form.password" type="password"></el-input> </el-form-item> </el-form> </el-main> </el-container> </template> <script> export default { data() { return { form: { username: '', password: '' } }; } }; </script> <style scoped> .el-main { display: flex; justify-content: center; align-items: center; height: 100%; } .centered-form { width: 400px; } </style> ``` 此组件展示了如何结合模板、脚本以及样式部分完成需求[^3]。 --- #### 注意事项 1. 如果 `<el-main>` 高度未完全填充其父容器，则需确保父级容器的高度被正确设置为 `100%` 或其他固定值[^1]。 2. 当页面中有滚动条时，建议为 `<el-main>` 添加最小高度属性（如 `min-height: 100vh`），以防止内容溢出影响居中效果[^4]。 --- ###