Question

The smiley face (when you click the link) is a little towards the bottom (with respect to the black box) in the following:

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;
}

How can I have that smiley right in the center?

Answer 1

How about this ?

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;
}