定位 宽度不确定 水平居中

.box{

position:relative;

} 

.child{

   height: 30px;

    line-height: 30px;
    position: absolute;
    bottom: 50%;
    left: 50%;
   transform:translate(-50%,-50%);
    padding-left: 10px;
    padding-right: 10px;

    text-align: center;

}

<div class="box'>

   <div class="child">

   </div>

</div>

坑：

child的最大宽度只为box的一半