我想要将一个flex项目垂直和水平居中。
我想让一些文本固定在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链接。