不固定宽度的浮动元素水平居中

不固定宽度并且浮动的元素怎么水平居中呢？

<div style="overflow:hidden">
   <!-- 不固定宽度的浮动元素水平居中 -->
   <div style="float: left;position: relative;left: 50%">
      <span style="margin-bottom: 15px;
                 font-weight: bold;
                 float: left;
                 position: relative;
                 right: 50%">{{tianyan}}</span>
    </div>
    <div style="float:right;">
      <el-button type="primary" @click="aini">亲爱的</el-button>
    </div> 
</div>

参考链接https://www.jianshu.com/p/cd7392862ea4