vue中用v-for循环出出来的div下面的span不给宽度也能相对于div居中

效果图

1.html 

<div>          
  <div v-on:mousemove="dataDetails($event, item)" v-on:mouseleave="hiddenDetail($event)" 
  v-for="(item, index) in sectionDiagram" 
  :style="{height: item.height, left: item.sqrareLeft + 'px', width: item.width + 'px',zIndex: 88 + index}" 
  :key='index' class="middleBoxBgmSquare" 
  :class="square(item.passState)">
    <span class="titleClass" >{{item.name}}</span>
  </div>
</div>

2.让span居中，外层div的position:relative

.titleClass{
  position: absolute;
  top: -27px;
  color: #fff;
  font-size: 18px;
  word-break: keep-all;
  white-space: nowrap;
  display: inline-block;
  text-align: center;
  left: 50%;
  transform: translate(-50%,0);
}