css - 绝对定位元素的最大宽度

Question

我有一个居中的 div(使用绝对定位和 transform:translate(-50%,-50%)，如 here 所述)。当子 div 的内容很短时，一切正常。当内容很长时，子 div 宽度被限制为容器 div 的 50%(可能是因为 left 设置为 50%)。

有没有办法让子div只有在内容很长的时候才展开到全宽？

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-left: auto; 
  margin-right: auto;
  border: 2px solid black;
}

.child {
  position: absolute;
  transform: translate(-50%, -50%);
  left:50%;
  top:50%;
  background:lightgreen;
}

<div class="container">
  <div class="child">short</div>
</div>

<div class="container">
  <div class="child">long long long long long long long</div>
</div>

编辑:我在 this 中找到了帮助我解决这个问题的解释。回答。

Answer 1

只需将 display: table 添加到子 div，这应该会为您提供所需的结果。

.container {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-left: auto; 
  margin-right: auto;
  border: 2px solid black;
}

.child {
  display: table;
  position: relative;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  background:lightgreen;
}

<div class="container">
  <div class="child">short</div>
</div>

<div class="container">
  <div class="child">long long long long long long long</div>
</div>

如果你可以使用flexbox，你也可以这样做:

.container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;

  width: 200px;
  height: 200px;
  border: 2px solid black;
}

.child {
  background:lightgreen;
}

<div class="container">
  <div class="child">short</div>
</div>
<div class="container">
  <div class="child">long long long long long long long</div>
</div>