CSS / Javascript Spinner将文本居中对齐

Question

I followed a guide on how to add a spinner , it can be found here:

http://blog.tkglaser.net/2012/02/waiting-spinner-for-long-running-form.html

Everything works great while on the pc but when I'm on a handdevice the text, (searching things..), doesn't stay in the middle, (the spinner does).

Css for the text:

#loadingspinner {
    cursor: default;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: center;
    font-size: larger;
    padding-top: 80px;
    user-select: none;
    color: black;
}

How come it centers fine when surfing on a pc but not from a mobile device?

Thanks.. //css noob

Answer 1

I noticed that the parent div that contained the spinner had position:fixed; so instead of using vertical-align: middle; I used:

position: fixed;

top: 50%;

and some padding to get it down abit.