将一个弹性项目居中，将另一个弹性项目底部对齐

Question

我正在尝试使一个伸缩项目在垂直和水平方向居中。

我想将一些文本固定在flex容器的底部。

margin-top:auto在文本上只是将内部框推到顶部。有想法吗？

.container {
  background: lightblue;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.container .box {
  background: goldenrod;
  height: 30px;
  width: 30px;
}

<div class="container">
  <div class="box"></div>
  <span>Text</span>
</div>

这是codepen。

Answer 1

请尝试以下方法：

.box  {
    background:goldenrod;
    height: 30px;
    width: 30px;
    margin: auto;
  }