element plus组件居中显示

element plus组件内容居中显示

今天用Element UI做一个分页，发现所有组件都无法实现居中显示，百度了大部分都是text-align:center，但我试了都不管用，自己研究了半天终于找到了解决办法。

<el-formref="ruleForm"label-width="100px"><el-form-itemlabel-width="0"><el-button>确认</el-button></el-form-item></el-form>

以上按钮默认居左显示，使用div括起来，然后使用text-align:center：

<divstyle="text-align:center"><el-formref="ruleForm"label-width="100px"><el-form-itemlabel-width="0"><el-button>确认</el-button></el-form-item></el-form></div>

然而并没有居中，然后经过半天琢磨改成以下代码：

<divstyle="text-align: -webkit-center"><el-formref="ruleForm"label-width="100px"style="width: max-content"><el-form-itemlabel-width="0"><el-button>确认</el-button></el-form-item></el-form></div>

成功居中显示了！
text-align:center改成了text-align: -webkit-center
-webkit-center会将内的所有组件对其，跟

<center>

差不多
然后子标签加了个style=“width: max-content”，定义宽度为最大内容。默认是占一整行的。
做个笔记，也算是踩过的坑。