html - 中心位置绝对元素在位置绝对父元素内，具有最大宽度

Question

我有一个 h2，它绝对定位在父级 div 中，而父级 div 也是绝对定位的。父 div 的最大宽度为 350px，我想做的是将 h2 居中。我不想在 h2 上设置 left:0 和 right:0 因为这会拉伸(stretch)以填充 350px 最大宽度而不是我希望 h2 增长如果添加了更多内容，则为宽度。绝对定位 h2 是一项要求。

代码笔:http://codepen.io/styler/pen/mAyIt

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>

Answer 1

您可能会发现这有帮助。

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

引用:http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

你的笔叉:http://codepen.io/jakeparis/pen/CGjni