Html 将一个柔性项目居中，并将另一个项目底部对齐

我试着让一个flex项目垂直和水平居中

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

页边距顶部：文本上的自动

将内部框推到顶部。想法

.container{
背景：浅蓝色；
宽度：300px；
高度：300px；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
对齐项目：居中；
填充：10px；
}
.集装箱{
背景：一枝黄花；
高度：30px；
宽度：30px；
}

正文

这里有一种方法

将

position:relative

添加到

.container

CSS规则中，然后使用

.box

上的绝对定位将

span

定位到父容器的底部

您可以通过允许

.box

具有100%宽度，然后使用

文本对齐：居中来居中文本


.container{
背景：浅蓝色；
宽度：300px；
高度：300px；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
对齐项目：居中；
填充：10px；
位置：相对位置；
}
.盒子{
背景：一枝黄花；
高度：30px；
宽度：30px；
}
跨度{
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
文本对齐：居中；
}

正文
由于flexbox对齐涉及到容器中自由空间的分配，因此在这种情况下，
边距顶部：auto
不起作用，因为另一侧没有配重

因此，框居中和文本底部对齐的一种方法是创建文本元素的副本并将其放置在框的另一侧。这将创建一个配重

在两端平衡相等的情况下，柔性对齐特性（包括
auto
margins）可以正常工作

在这种情况下，即使是
justify content:space-between
也会起作用

当然，您需要对重复元素应用
可见性：hidden


.container{
背景：浅蓝色；
宽度：300px；
高度：300px；
显示器：flex；
证明内容：中心；
弯曲方向：立柱；
对齐项目：居中；
填充：10px；
}
.盒子{
背景：一枝黄花；
高度：30px；
宽度：30px；
边距：自动0；/*或改为在.container上使用justify content:space-between*/
}
跨度：第一个孩子{
可见性：隐藏；
}

正文
正文
请尝试以下方法：


.box{
背景：一枝黄花；
高度：30px；
宽度：30px；
保证金：自动；
}
是否尝试使用其他浏览器？这里的中心很好。复制文本是一种严重的黑客行为，具有搜索引擎优化和可访问性的含义。@coreyward，黑客行为不是理想的解决方案，但它们通常很有用。用于布局的表格/浮动。UL/OL用于导航。在flex容器中复制元素/伪元素以实现相等平衡。这只是一个想法。用户可以选择实施或忽略。这是一个赢家，谢谢@lowbelly，请记住此解决方案将
.box
元素集中在容器的剩余空间，而不是整个空间。文本占用的空间未考虑在内。因此，居中垂直偏移的长度等于文本元素的高度。