Html 中心位置绝对元素在位置绝对父元素内部，最大宽度

我有一个

h2

绝对定位在父

div

中，父

div也绝对定位。父div的最大宽度为350px，我想做的是将
h2
放在它的中心。我不想在h2上设置
left:0
和
right:0
，因为这将拉伸到350px的最大宽度，相反，如果添加更多内容，我希望h2的宽度增加。绝对定位h2是一项要求

代码笔：

CSS

.tt {
  max-width: 350px;
  min-height: 45px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  background: #8F9924;

  .tt-content {
    border: 2px solid black;
    background: #ACC95F;
    position: absolute;
    bottom: 0;
    padding: 5px 10px;
  }
}

HTML

<div class="tt">
  <h2 class="tt-content">This is the content.</h2>
</div>


这就是内容。
将绝对定位的元素居中放置，如下所示：

假设500px宽度元素：

#heading {
    margin-left: 50%;
    left: -250px;/* negative half-width */

}

更新：对不起，我应该更加注意这个问题

如果需要动态宽度，则考虑相对定位。然后只需使用
文本对齐：居中”

更新2：在H2元素上也需要这个：
display:inline块
这将使div宽度与子内容保持一致。
您可能会发现这很有帮助

.tt-content {
   ...
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

参考：

你的笔叉：
试试这个

h2{
width: 100%;
position: absolute;
left: 50%;
margin-left: -50%;
}

为什么要求绝对定位？你不能用绝对位置来做你想做的事，但是你有很多其他的方法来居中。如果你的文本总是一行，你可以试试这个嘿，它需要绝对位置的原因是因为文本会动态变化，但是每次从底部开始生长，每次有新行出现，意味着它需要锚定到底部。希望这是清楚的enough@Danko是的，不幸的是，文本可以延伸到多行，因此nowrap不是一个选项现在这样：D@Danko谢谢你指出这一点。是我的错。答案已更新。