Question

我有一个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>

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

Answer 2

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

假设500px宽度元素：

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

}

更新：抱歉，应该更好地关注这个问题。

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

更新2：你的H2元素也需要这个：display:inline-block; 这将使div宽度与子内容保持一致。

Answer 3

试试这个

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

中心位置绝对元素内部位置绝对父级具有最大宽度

3 个答案: