首页elementplus 表单垂直居中

elementplus 表单垂直居中

时间: 2025-01-06 21:37:45 浏览: 95

### 实现表单垂直居中的方法为了在Element Plus中实现表单的垂直居中，可以采用Flexbox布局来调整容器内的子元素位置。具体来说，在包裹`<el-form>`标签的父级元素上应用样式： ```css .parent-container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ height: 100vh; /* 设置高度为视口的高度 */ } ``` 接着定义HTML结构如下所示[^1]： ```html <div class="parent-container"> <el-form ref="ruleForm" label-width="100px"> <el-form-item> <el-button>确认</el-button> </el-form-item> </el-form> </div> ``` 通过上述方式能够确保整个表单位于页面中央区域。对于更复杂的场景下如果遇到label不对齐的情况，则可以通过自定义CSS类名并利用`:deep()`伪类穿透作用域限制来进行微调[^2]: ```scss <style scoped lang="scss"> .el-form-item__label { :deep(.el-form-item__label){ transform: translateY(-50%); top: 50%; position: absolute; } } </style> ``` 此段代码会使得所有的`el-form-item__label`标签相对于其默认的位置向上移动一半自身的高度，并设置顶部偏移量为50%，从而达到垂直居中的效果。

阅读全文