Html 创建一个只有CSS的弹出窗口，带有淡入淡出效果

我想创建一个基于CSS的弹出窗口（允许CSS3），没有任何JavaScript，具有渐变和缩放效果。类似于冰淇淋Sandwitch和果冻豆的弹出消息

我尝试了以下方法：

代码的主要部分：

HTML

<span class="info"> Info </span>
<div class="message">
    <p>
        Content
    </p>
</div>​  

我正在做的是将元素的

不透明度设置为
0
，并在同级DOM元素的
上悬停
，将其转换为
1


如何将其垂直和水平放置在中心位置？

此外，这是制作CSS3弹出窗口的正确方法吗？

我可以从
display:none
转换到
display:block

谢谢

如何将其垂直和水平放置在中心位置

基本上，您将从顶部和左侧将弹出窗口推50%。但是，您必须向后退一点，因为您必须考虑弹出窗口的宽度和高度

.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  /* -(height/2) */;
    left: 50%;    margin-left: /* -(width/2) */;
}

资料来源：

注意：
-（高度/2）
和
-（宽度/2）
是元素宽度和高度一半的负值。例如，如果您的元件是
300px 200px
code是：

.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  -100px;
    left: 50%;    margin-left: -150px;
}


另外，这是制作CSS3弹出窗口的正确方法吗

是的，如果你说的是悬停弹出


我可以从显示：无转换为显示：块吗

不可以。您可以从
display:none
转到
display:block
，只在
不透明度上进行
转换
，现在可以使用
可见性
：

。消息{
可见性：隐藏；
不透明度：0；
变换：比例（.9）；
转换：transform.18s，不透明.18s，可见性0s.18s；//延迟可见性
}
.info:hover+.message{
能见度：可见；
不透明度：1；
变换：比例（1）；
转换延迟：0s；
}
很抱歉延迟接受答复。感谢CSS技巧链接在中心的定位。我用过一次，但忘了：）
.center-of-screen {
    position: absolute;
    top: 50%;     margin-top:  -100px;
    left: 50%;    margin-left: -150px;
}