Question

我需要水平居中对齐一个灵活的宽度div元素。

<div class="outer">
  <div class="inner"> ...this content will grow or shrink while on items changed... </div>
</div>

.outer {
  height: 500px;
  position: relative;
  background-color: gray;
}

.inner {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  border: 1px solid blue;
}

您可以看到div.inner完全水平居中对齐，但是其最大宽度将始终为div.outer的50％，而我希望当内容增长时，最大宽度可以更大。

并且：

我不想给div.inner一个固定或最小值，我希望它很灵活；
我知道“最大宽度”无效

任何建议将不胜感激！

Answer 1

使用flexbox

.outer {
  height: 500px;
  background-color: gray;
  display: flex;
  justify-content: center;
}

.inner {
  align-self: flex-end;
}

<div class="outer">
  <div class="inner"> ...this content will grow or shrink while on items changed... </div>
</div>

水平中心将div与灵活对齐

1 个答案: