CSS垂直文本居中

Question

笑脸(当你点击链接时)在下面有一点靠近底部(相对于黑框)：

http://jsfiddle.net/UzvWc/3/

HTML

<div id="message">:)</div>

CSS

#message {
    padding:0px;
    opacity:0.7;
    -webkit-border-radius:5px;
    background-color:black;
    color:white;
    width:200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -150px;
    text-align: center;
    font-size: 200pt;
    display: none;
}

我怎么能把那个笑脸放在中间呢？

Answer 1

这个怎么样？

http://jsfiddle.net/UzvWc/5/

HTML

<div id="message">:)</div><a id="showmessage" href="#">Show smiley</a>

CSS

#message {
    opacity:0.7;
    -webkit-border-radius:5px;
    background-color:black;
    color:white;
    width:200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -150px;
    text-align: center;
    font-size: 200pt;
    display: none;
    padding-bottom:45px;
}

Answer 2

您所需要做的就是添加一些padding-bottom。

我添加了25px。根据需要进行调整。

http://jsfiddle.net/jasongennaro/UzvWc/19/