css让子div在父div底部居中的方式，除了定位，还有什么？

Question

css让子div在父div底部居中的方式，除了定位，还有什么？父元素只有最小高度

Answer 1

flex布局

Answer 2

html

<div class="container">
    <div class="bottom"></div>
</div>

css

.container {
    display: flex;
    width: 300px;
    min-height: 300px;
    justify-content: center;
    align-items: flex-end;
    border: 1px solid #000
}

.bottom {
    width: 100px;
    height: 100px;
    background-color: #000;
}

Answer 3

html:

<div class="coupon-item">
    <div class="info-area">
    </div>
    <div class="status-area>
    </div>
</div>

CSS

.coupon-item {
    display: inline-block;
    .info-area {
      min-height: 133px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .status-area {
      min-height: 152px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
}