我将如何垂直对齐JavaScript文本？

Question

I have an alert box with text inside, but I can't think of any ways to move the text down within the alert box div, vertically centering it. I've tried line-height but that of course will not work for the two lines of text that I have when you view it on a browser with a min-width of 320px and max 480px. #alertmsg should remain at the top, however, the text within it should be centered when viewed on a mobile browser. I've also tried Vertical-align, but that doesnt work either. Does anyone have any suggestions?

Any help would be greatly appreciated. I also tried to place a <p> in the JavaScript; no luck.

Here is my CSS:

#alertmsg {
    position:absolute;
    background-color:#252525;
    top:0px;
    padding-left:0px;
    width:100%;
    font-family:'gotham-medium', arial, sans-serif;
    src:url("http://www.3elementsreview.com/fonts/gotham-light.ttf");
    font-style:normal;
    font-weight:normal;
    font-size:1.2em;
    line-height:1.2em;
    text-align:center;
    height:63px;
    color:#ffffff;
    opacity:1;
    display:inline-block;
    overflow:hidden;
    z-index:1000;
    border-bottom:2px solid #ff6000;
}

And my JavaScript:

$(document).ready(function() {
    if (typeof window.sessionStorage != undefined) {
        if (!sessionStorage.getItem('mySessionVal')) {
            $('<div />', {
                id   : "alertmsg",
                text :"Join our email list and receive the latest updates at 3Elements Review.",
                on   : {
                    click: function() {
                        $(this).slideUp(200);
                    }
                }
            }).appendTo('body').fadeIn(1).delay(6000).fadeOut("slow");
            sessionStorage.setItem('mySessionVal', true);
            sessionStorage.setItem('storedWhen', (new Date()).getTime());
        }
    }
});

Answer 1

You could use

#alertmsg {
    position:absolute;
    top: 50%;
    height:63px;
    margin-top: -31.5px; /* half height */
}

Demo