位置绝对父元素内的中心位置绝对元素，最大宽度答案

【问题标题】：Center position absolute element inside position absolute parent with max-width位置绝对父元素内的中心位置绝对元素，最大宽度
【发布时间】：2014-11-03 16:22:27
【问题描述】：

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

Codepen：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>

【问题讨论】：

为什么要求绝对定位？你不能用绝对位置做你想做的事，但你有很多其他的方法来居中。
如果你的文字总是一行，你可以试试这个codepen.io/anon/pen/boHlC
嘿，它需要绝对位置的原因是因为文本会动态变化，但每次换行时都会从底部向上增长，这意味着它需要锚定到底部。希望这足够清楚
@Danko 是的，不幸的是，文本可以继续多行，所以 nowrap 不是一个选项
现在像这样codepen.io/anon/pen/vAbec :D

标签： html css

【解决方案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

【讨论】：

【解决方案2】：

像这样居中一个绝对定位的元素：

假设元素宽度为 500px：

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

}

更新：对不起，应该更好地关注这个问题。

如果您需要动态宽度，请考虑相对定位。然后在父级上使用text-align:center;。

更新 2：您还需要在 H2 元素上使用它：display:inline-block; 这将使 div 的宽度与子内容保持一致。

【讨论】：

@Danko 感谢您指出这一点。我的错。答案已更新。

【解决方案3】：

试试这个

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

【讨论】：