Html 在flexbox中使用相对和绝对定位进行垂直定心

我正在使用

绝对

和

相对

定位我的

.box

，但正如您所看到的，文本似乎不是

顶部：100%

有人能解释为什么会这样吗

比如，当指定

top:100%

时，为什么文本（此处有一些文本）会溢出到子元素中

.box{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
调整项目：灵活启动；
高度：200px；
保证金：0自动；
宽度：90%；
边框：1px纯红；
}
.孩子{
位置：相对位置；
宽度：100px；
高度：100px；
边框：1px实心橙色；
}
柴尔德先生{
位置：绝对位置；
最高：100%；
左：50%；
转换：翻译（-50%，-50%）；
}

这里有一些文字
dfd
dfd

如果我理解正确，这会对你有所帮助

---

尝试使用

margintop:-10px，它将减少top的空间10px。您也可以尝试
左对齐
，
右对齐
和
下对齐
问题是因为在
变换中，您将
-50%
应用于Y轴，这意味着将从
顶部：100%
中减去
50%
，因此，它将是您仅声明的
top:50%
，没有
transform

您可以只将变换应用于X轴，删除Y轴，如@Michael_B所述，或者使用下面的代码垂直/水平居中框下方的文本：

position: absolute;
top: 100%;
right: 0;
left: 0;
margin: auto

注意：我将您的
img
更改为
背景img
（可选）


.box{
显示器：flex；
柔性包装：包装；
证明内容：之间的空间；
高度：200px；
保证金：0自动；
宽度：90%；
边框：1px纯红；
}
.孩子{
宽度：100px；
高度：100px；
边框：1px实心橙色；
}
.box>div：类型的第一个{
背景：url（“//dummyimage.com/100x100”）；
职位：相对
}
.box>div：div类型的第一个{
位置：绝对位置；
最高：100%；
右：0；
左：0；
保证金：自动；
宽度：50px；
文本对齐：居中；
背景：红色
}

这里有一些文字
dfd
dfd

。。当指定100%时，为什么文本（“此处有一些文本”文本）会溢出到子元素中

因为您已将
transform
属性应用于元素：

.childschild { transform: translate(-50%, -50%); }

这告诉元素沿x轴向后移动其宽度的50%，沿y轴向后移动其高度的50%

所以首先你要告诉它是
top:100%
。然后你告诉它回溯50%的高度，这将使它回到
.child
元素上。您可以删除
转换
，它将按预期工作

试试这个：
transform:translateX（-50%）（）

可在此处找到更完整的说明和插图：