宽高未知且居中，内容居左

  父级parent设置position：relative；子级parentBox设置position：absolute；left：0；right：0；overflow：hidden；

  上面的设置可使外层居中；设置childBox的文字居左显示，则text-align：left；left：50%；transform：translate（-50%）；width：fit-content（注意此用法的兼容性）；注意li需要是行内元素或脱离文档流

html：

<div class="parent">
  <div class="parentBox">
    <div class="childBox">
      <li v-for="name in dataList">
        <span>{{name.name}}</span>
        <span>{{name.author}}</span>
      </li>
    </div>
  </div>
</div>

数据：

dataList: [

{
  name: '安娜·卡列尼娜',
  author: '列夫·托尔斯泰（俄）',
},
{
  name: '平凡的世界',
  author: '路遥',
},
{
  name: '曾国藩家书',
  author: '曾国藩',
},
{
  name: '穆斯林的葬礼',
  author: '霍达',
},
{
  name: '白鹿原',
  author: '陈忠实',
},
{
  name: '秦腔',
  author: '贾平凹',
},
{
  name: '那些回不去的年少时光',
  author: '桐华',
},
{
  name: '射雕英雄传',
  author: '金庸',
},
{
  name: '红楼梦',
  author: '曹雪芹',
},
{
  name: '嫌疑人X的献身',
  author: '东野圭吾（日）',
},
{
  name: '岛上书店',
  author: '加布瑞埃拉·泽文（美）',
},
{
  name: '查令街84号',
  author: '海莲·汉芙（美）',
},

]

CSS：

.parent
  position relative
  .parentBox
    position absolute
    bottom -20px
    left 0
    right 0
    border-radius 2px
    overflow hidden
    .childBox
      position: relative;
      text-align left
      left: 50%
      transform translateX(-50%)
      -ms-transform translateX(-50%)
      -o-transform translateX(-50%)
      -webkit-transform translateX(-50%)
      -moz-transform translateX(-50%)
      width: -moz-fit-content;
      width: -webkit-fit-content;
      width: fit-content;
      min-height 20px
      li
        background: rgba(0, 0, 0, .6)
        padding-left: 5px
        padding-right: 5px
        display inline-block
        color: #fff