創建一個CSS彈出窗口，帶淡入淡出效果

Question

我想創建一個基於CSS的彈出窗口（CSS3允許），不帶任何JavaScript，具有淡入淡出過渡和縮放效果。類似IceCream Sandwitch和JellyBean彈出消息。

我曾嘗試以下：
http://jsfiddle.net/OMS_/7UaK4/5/

代碼的主要部分：

HTML

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

CSS

.message { 
    position: absolute; 
    top: 100px; 
    left: 0; 
    width: 100%; 
    text-align: center; 
    opacity: 0; 
    -webkit-transform: scale(.9, .9); 
    -webkit-transition: all .18s ease-in-out; 
} 
.info:hover + .message { 
    opacity: 1; 
    -webkit-transform: scale(1, 1); 
} 

我正在做的是將元素的opacity設置爲0，並將其設置爲兄弟DOM元素的hover，將其轉換爲1。
如何將它定位在中心位置，既垂直又水平？
另外，這是製作CSS3彈出窗口的正確方法嗎？
我可以從display: none轉換到display: block嗎？

感謝

Answer 1

如何在中心位置，則這兩個垂直和水平？

基本上，你會從頂部和左側推彈出50％。但是，由於必須考慮彈出窗口的寬度和高度，因此您必須稍微往後退一點。

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

來源：How to center an object exactly in the center?

注：-(height/2)和-(width/2)是元素的寬度和高度的一半的負值。例如。如果你的元素是300px x 200px代碼：

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

---

此外，這是做一個CSS3彈出的正確方法？

是的，如果你正在談論懸停彈出窗口。

---

我可以從顯示轉變：無顯示：塊？

號你會從display: none去display: block與transition只opacity。