Question

<div id='loadingScreen'> has a width of 0 because of the position:absolute and the positioning isn’t working because of it. Adding a width of 100% to <div id='loadingScreen'> doesn’t solve the problem.

CSS:

        #loadingScreen{
            position:relative;
        }
        .centered{
            height:100px;
            position:absolute;
            top:50%;
            margin-top:-50px;
        }

HTML:

    <div id="loadingScreen">
        <div class="centered">
            <!--stuff-->
        </div>
    </div>

Answer 1

You can do something like this:

.centered
{
    height:200px;           
    border: 1px solid black;
    vertical-align: middle;
    display:table-cell;
}

Here’s a Demo in JS Bin: http://jsbin.com/ireqoc/1/edit