el-form-item内部元素居中的问题

经查询发现el-row，el-col可以实现居中，但是引入后发现还是不行，代码如下：

<el-form>
  <el-form-item >
       <el-row  justify="center" >
              <el-col :span="24">
                <el-button >登 录</el-button>
              </el-col>
        </el-row> 
  </el-form-item>
</el-form>

后来发现把el-row及下面的元素移出el-form-item就可以实现水平居中，但我想el-form-item中的元素居中，经测试有两种方法可行，一个是在里面button外包一个有宽度的div，还有就是给button设置margin: 0 auto，例子：

<el-form-item >
            <div style="width: 100%; text-align: center;">
              <el-button>按钮1</el-button>
            </div>
            <el-button style="margin:0 auto;">按钮2</el-button>
</el-form-item>