Html 当我在悬停框中输入小的单行内容时，如何将图标垂直居中？有没有可能？

您好，我尝试将图标设置为悬停，但当框内容为同一行时，工作正常，但当我在任何框中输入小内容时，其中一行图标垂直方向不正确居中，我也有附件问题和我想要的。我没有设置相对位置和顶部的百分比，请任何解决方案。内容为“框上无块悬停”非常感谢

同一行代码：

输入小的单行内容时：

section{padding:100px 0；}
img{最大宽度：100%；}
*{框大小：边框框；}
身材{
位置：相对位置；
}
.blog悬停图标{
-webkit转换：0.3s；
过渡：0.3s；
位置：绝对位置；
身高：100%；
宽度：100%；
背景：rgba（37,37,37,0.5）；
排名：0；
左：0；
文本对齐：居中；
z指数：1；
可见性：隐藏；
不透明度：0；
}
.box.blog悬停图标{
能见度：可见；
不透明度：1；
}
.box.blog悬停图标跨度{
字体大小：30px；
线高：30px；
颜色：#fff；
位置：相对位置；
最高：12%；
}
.box.post内容{
位置：绝对位置；
底部：0；
左：0；
填充：30px；
背景色：#252525；
z指数：2；
颜色：#fff；
}
.box.post内容a{
颜色：#5971ff；
}
.box.post内容a：悬停{
文字装饰：无；
}
.box.post内容p{
显示：无；
}
.box：悬停。发布内容p{
显示：块；
}
.box.post内容.author{
边缘顶部：10px；
}

+
Lorem Ipsum只是印刷行业Ipsum标准的文本设置

七月三十日
+
Lorem Ipsum只是文本

六月二十五日
+
Lorem Ipsum只是印刷行业Ipsum标准的文本设置

十二月五日

使用以下方法：

.box .blog-hover-icon span {
    font-size: 30px;
    line-height: 30px;
    color: #fff;
    position: absolute;
    top: 50%;
    transform: translate(0%, -50%);
    left: 0;
    right: 0;
    margin: 0 auto;
}

---

这也将与position realtive一起工作，将高度添加到

标签，以便在框悬停时正确显示

.box .post-content p {
    display: none;
    height: 80px;
    max-height: 100%;
}

---

在父级中使用flexbox作为以下CSS

.container{
display:flex;
align-items:center;
height:100vh;
jsutify-content:center;
}

---

请根据以下内容更改html和css代码并进行更新。

section{padding:100px 0；}
img{最大宽度：100%；}
*{框大小：边框框；}
身材{
位置：相对位置；
}
图figcaption{
位置：绝对位置；
底部：0；
排名：0；
身高：100%；
宽度：100%；
-ms-flex方向：列；
-网络工具包盒方向：vertican；
-网络工具包盒方向：诺曼；
弯曲方向：立柱；
显示：-ms flexbox；
显示：-网络工具包盒；
显示器：flex；
-webkit转换：0.3s；
过渡：0.3s；
}
.blog悬停图标{
-webkit转换：0.3s；
过渡：0.3s；
z指数：1；
可见性：隐藏；
不透明度：0；
}
.box:hover.blog悬停图标{
能见度：可见；
不透明度：1；
}
.box.blog悬停图标跨度{
字体大小：30px；
线高：30px；
颜色：#fff；
位置：相对位置；
最高：12%；
}
.box.post内容{