css - 如何在不知道 Css 大小的情况下将组件定位在 div 的底部中心

Question

这是应用于 div 的样式，使组件(按钮)在按钮中居中，而不知道将占用 div 的剩余空间的大小和按钮的大小，因为这种样式将是通用的。

我用过这种风格，但对我不起作用:

<div location="buttonLayout" style="display:flex; justify-content:center; align-items:flex-end ;"></div>

按钮居中但未放置在父div剩余空间的底部。

Answer 1

您可以使用绝对定位让按钮位于底部中间:

.parent {
  background: gold;  
  position: relative;
  width: 300px;
  height: 400px;
  box-sizing: border-box;
  padding-bottom: 48px; // Padding + button height
}

.parent button {
  background: grey;
  border: none;
  height: 32px;
  color: #fff;
  
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

<div class="parent">
  <button>Button any size</button>
</div>