Html 父对象中的底部垂直对齐div

我有一个问题，垂直对齐一个按钮内的家长。 按钮应该对齐到“info”div的底部，但我无法让它粘住

在这种情况下，我不能使用“位置：绝对”

我事先也不知道主要母舱的高度

HTML:

---

正如一些评论中提到的，position:absolute是最简单的方法。但是，您说您受到这个因素的限制，所以这里有一个使用flexbox的替代方案

您需要在父元素上看到三个属性：显示、弯曲方向和对齐内容。然后在子元素上留一个边距，以确保其居中于底部。这是最新的提琴。不需要绝对位置：）

---

正如一些评论中提到的，position:absolute是最简单的方法。但是，您说您受到这个因素的限制，所以这里有一个使用flexbox的替代方案

您需要在父元素上看到三个属性：显示、弯曲方向和对齐内容。然后在子元素上留一个边距，以确保其居中于底部。这是最新的提琴。不需要绝对位置：）

---

. 这行吗？为什么不能使用绝对位置？^^^^皮特说的。这行吗？为什么不能使用绝对位置？^^^^皮特说的。谢谢@Paulie_D。我先试了别的东西，但忘了把它拿走。编辑答案以反映您的建议。谢谢@knolljm！使用flex修复了issue@IvanBuljovčić很高兴听到这个消息。如果这个答案对你有帮助，你能接受吗？谢谢@Paulie_D。我先尝试了其他东西，但忘了删除它。编辑答案以反映您的建议。谢谢@knolljm！使用flex修复了issue@IvanBuljovčić很高兴听到这个消息。如果答案对你有帮助，你能接受吗？

<div class="container">
  <a href="#"><img src="http://placekitten.com/g/200/400" alt="" /></a>
  <div class="info">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus rem tenetur temporibus voluptas repellendus.</p>
    <button>Button</button>
  </div>
</div>

* { box-sizing: border-box; }

.container {
  width: 200px;
  height: 700px; /* The height is variable!!! */
  background: #ccc;
  padding: 1em;
  overflow: hidden;
}

a { display: block; height: 50%; }
a img { display: block; width: 100%; max-width: 100%; }

.info {
  background: #fa0;
  display: block;
  height: calc(50% - 1em);
  margin-top: 1em;
  text-align: center;
}

.info p {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  background: #a0f;
  margin: 0;
}

.info button {
  display: inline-block;
  vertical-align: bottom;
}

.info {
  background: #fa0;
  display: block;
  height: calc(50% - 1em);
  margin-top: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info button {
  margin: 0 auto;
}