Html 如何将一个div居中于另一个具有内联块的div的顶部

我正在尝试将

文本

div置于具有

内联块

的

框

div顶部的中心。我试着在文本div上使用

position:absolute

。但是当浏览器屏幕缩小或扩展时，

text

div的定位就会混乱。如何解决这个问题

.mainDiv{
保证金：自动；
宽度：100%；
填充：10px；
左：300px；
文本对齐：居中；
}
.盒子{
背景色：红色；
宽度：100px；
高度：100px；
显示：内联块；
}
.文本{
背景颜色：蓝色；
位置：绝对位置；
最高：70%；
左：45%；
}

文本

文本标记应先写入，然后写入框。然后您可以尝试使用

块

而不是

内联块

，然后将文本宽度设置为100%，显示

块

和“边距：0自动”。另外，如果可以的话，可以考虑使用合适的语义标记而不是div。此外，我怀疑

顶部

和

左侧

规则导致文本未正确对齐。您也不再需要

位置：绝对值。
文本标记应先写入，然后写入框。然后您可以尝试使用
块
而不是
内联块
，然后将文本宽度设置为100%，显示
块
和“边距：0自动”。另外，如果可以的话，可以考虑使用合适的语义标记而不是div。此外，我怀疑
顶部
和
左侧
规则导致文本未正确对齐。您也不需要再使用
位置：absolute
。
我假设您正在使用inline块将
.box
置于
.main div
内的中心位置。从技术上讲，使用当前的html结构，您不能将
.text
元素置于
.box
元素的中心，但您可以将其置于
.main div
的中心，这在您的示例中基本相同

我首先将
位置：relative
添加到
.main div
。绝对定位的元素基于其最近的祖先（具有定位上下文）进行定位。最简单的设置方法是添加
位置：relative

然后使用
.text
元素，您可以调整为：

.text {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50% );
}

这是因为
top
和
left
从其父元素的顶部和左侧定位top和left元素。因此，
.text
的顶部将从
.main div
向下的50%开始，同样地，左侧也是如此。这会使文本过左过下

transform:translate
值的工作方式不同-它们基于元素本身的大小。因此，
-50%
会将一个元素移回其宽度或高度的一半。通过将其设置为宽度和高度，我们移动了
.text
，这样它的上边缘和左边缘就不是50%，而是中心在50%


.mainDiv{
位置：相对；/*添加到make中。文本相对于此对齐，而不是文档对齐*/
保证金：自动；
宽度：100%；
填充：10px；
/*左：300px；（我删除了这个用于演示，但如果您需要它，您可以将它添加回）*/
文本对齐：居中；
}
.盒子{
背景色：红色；
宽度：100px；
高度：100px；
显示：内联块；
}
.文本{
背景颜色：蓝色；
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）；/*将文本向左拉，并向上拉文本大小的50%*/
}

文本
我假设您使用内联块将
.box
置于
.main div
内的中心位置。从技术上讲，使用当前的html结构，您不能将
.text
元素置于
.box
元素的中心，但您可以将其置于
.main div
的中心，这在您的示例中基本相同

我首先将
位置：relative
添加到
.main div
。绝对定位的元素基于其最近的祖先（具有定位上下文）进行定位。最简单的设置方法是添加
位置：relative

然后使用
.text
元素，您可以调整为：

.text {
  background-color: blue;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50% );
}

这是因为
top
和
left
从其父元素的顶部和左侧定位top和left元素。因此，
.text
的顶部将从
.main div
向下的50%开始，同样地，左侧也是如此。这会使文本过左过下

transform:translate
值的工作方式不同-它们基于元素本身的大小。因此，
-50%
会将一个元素移回其宽度或高度的一半。通过将其设置为宽度和高度，我们移动了
.text
，这样它的上边缘和左边缘就不是50%，而是中心在50%


.mainDiv{
位置：相对；/*添加到make中。文本相对于此对齐，而不是文档对齐*/
保证金：自动；
宽度：100%；
填充：10px；
/*左：300px；（我删除了这个用于演示，但如果您需要它，您可以将它添加回）*/
文本对齐：居中；
}
.盒子{
背景色：红色；
宽度：100px；
高度：100px；
显示：内联块；
}
.文本{
背景颜色：蓝色；
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）；/*将文本向左拉，并向上拉文本大小的50%*/
}

文本
如果需要，可以将蓝色
div
设置为红色
div
的子项，这样蓝色
div
将始终与红色
div
相对。我还将
position:relative
添加到红色
div
，并将
transform:translate
添加到蓝色
div

如果我没弄错的话，这也是响应性的，所以试着缩小你的浏览器


.mainDiv{
保证金：自动；
宽度：100%；
填充：10px；
左：30