Html 如何使悬停时显示的文本显示在div的中心（水平和垂直）
我正在尝试建立一个网站，学习一些我通过学习html和css学到的东西。我试图使图像停留在容器中，但在悬停时显示为“放大”，然后在悬停时显示文本。我有第一部分，即“缩放”，但由于某种原因，我无法使文本保持居中。有几次我把它放在中央，但一旦我改变屏幕分辨率或在其他设备上尝试，它就会失败。如何使文本在div中包含的悬停图像中水平和垂直居中显示？我还想添加一个小的颜色过滤器，但这是我会弄清楚一旦我得到的文本中心。下面是一个具体的例子，说明我正在做什么： --在包含“shop”元素的部分，当您将鼠标悬停在顶部时，文本将居中显示。我似乎也无法通过检查来弄明白 我已经查看StackOverflow有一段时间了，不幸的是没有成功。我相信可能会有答案，但出于某种原因，当我试图将所有内容“缩放”在一起时，我将图像包含在div中，而该图像中的文本似乎不起作用。我希望这不是一个在其他地方有明显答案的东西，我真的只是被卡住了，以及下面的代码Html 如何使悬停时显示的文本显示在div的中心（水平和垂直）,html,css,Html,Css,我正在尝试建立一个网站，学习一些我通过学习html和css学到的东西。我试图使图像停留在容器中，但在悬停时显示为“放大”，然后在悬停时显示文本。我有第一部分，即“缩放”，但由于某种原因，我无法使文本保持居中。有几次我把它放在中央，但一旦我改变屏幕分辨率或在其他设备上尝试，它就会失败。如何使文本在div中包含的悬停图像中水平和垂直居中显示？我还想添加一个小的颜色过滤器，但这是我会弄清楚一旦我得到的文本中心。下面是一个具体的例子，说明我正在做什么： --在包含“shop”元素的部分，当您将鼠标悬停在
正文{
背景色：灰色；/*颜色，以便您可以看到图片比例*/
}
.box{/*用于存放项目的容器*/
宽度：20%；
利润率：20px；
框大小：边框框；
}
.imgBox{/*图像框，用于在.box类中包含图像*/
位置：相对位置；
填充：0；
宽度：100%；
显示：内联块；
保证金：自动；
溢出：隐藏；
过渡：所有.3s易于输入输出；
}
.imgBox:hover{/*在hover上添加一个带有阴影的小边框*/
过滤器：投影（0px 0px 0px rgba（0,0,0,6））
投影（0px 0px 10px rgba（0,0,0,6））；
}
.imgBox img{/*图像框中的实际图像，因此它保留在div中*/
显示：块；/*无空格*/
转换：.3s易进易出；
最大宽度：100%；
最大高度：100%；
保证金：自动；
}
.imgBox：悬停img{/*缩放图像，但将其保持在悬停框内*/
转换：比例（1.2）；
}
.hover文本{/*我希望以悬停为中心显示的文本*/
显示：无；
明确：两者皆有；
文本对齐：居中；
颜色：白色；
字号：1em；
宽度：100%；
底部：0；
位置：绝对位置；
z指数：2；
垂直对齐：中间对齐；
}
.hover文本：悬停{
显示：块；
不透明度：1；
}
.imgBox:hover.hovertext{
显示：块；
}
的CSS。hovertext.hovertext {
/* text I want to appear centered on hover */
display: none;
clear: both;
text-align: center;
color: white;
font-size: 1em;
width: 100%;
/* bottom: 0; <-- remove */
position: absolute;
z-index: 2;
/* Reset margin of p to 0 to enable correct vertical centering */
margin:0;
/* Position from to of parent by 50% height */
top:50%;
/* Offset a further 50% by height of the this element's height */
transform:translateY(-50%);
/* vertical-align: middle; <-- remove this */
}
的CSS。hovertext.hovertext {
/* text I want to appear centered on hover */
display: none;
clear: both;
text-align: center;
color: white;
font-size: 1em;
width: 100%;
/* bottom: 0; <-- remove */
position: absolute;
z-index: 2;
/* Reset margin of p to 0 to enable correct vertical centering */
margin:0;
/* Position from to of parent by 50% height */
top:50%;
/* Offset a further 50% by height of the this element's height */
transform:translateY(-50%);
/* vertical-align: middle; <-- remove this */
}