html - div 不会垂直对齐

Question

<div id='loadingScreen'>由于 position:absolute 的宽度为 0因此定位不起作用。将 100% 的宽度添加到 <div id='loadingScreen'>并不能解决问题。

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

.loadingScreen
{
display:table;
}

.centered
{
display:table-cell;
vertical-align:middle;
}