在元素的两侧平均分配溢出文本

Question

我遇到了以下问题：我得到了一个<figure>，它<figcaption>可能会溢出<figure>. 你可以在下面的小提琴中看到：

body{
  display:flex;
  justify-content:center;
  align-items:center;
}
figure{
  width:300px;
  height:500px;
}
img{
  width:100%;
}
figcaption{
  position:relative;
  top:-50px;
  display:inline-block;
  font-size:3em;
  white-space:nowrap;
  text-align:center;
  font-weight:bold;
  width:100%;
}

<figure>
<img src="https://www.zooroyal.de/magazin/wp-content/uploads/2017/03/Golden-Retriever-760x560.jpg">
<figcaption>Golden Retriever</figcaption>
</figure>

我想要实现的是，<figure>无论文本是否比图形宽，文本仍以 为中心。

我想不出可能的解决方案。有谁知道实现这一目标的方法？请不要使用 JavaScript。

Answer 1

使用这些样式：

    figcaption {
        position:relative;
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }

希望这是您想要实现的目标。