2

<div id='loadingScreen'>のために幅が0であり、position:absoluteそれが原因でポジショニングが機能していません。に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>
4

3 に答える 3

1 
.loadingScreen
{
display:table;
}

.centered
{
display:table-cell;
vertical-align:middle;
}
于 2013-01-23T15:42:38.707 に答える
1

position:absolute を実行すると、オブジェクトを配置したい場所に「手動で」効果的に配置することになります。つまり、自動的に整列するべきではありません。

通常の垂直方向の配置 - line-height:(div-height); を試してください。.loadingScreen の CSS 内。

div がテーブルの一部である場合は、vertical-align:middle; を試してください。代わりは。

于 2013-01-23T17:04:37.437 に答える
0

あなたはこのようなことをすることができます：

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

これがJSBinのデモです：http：//jsbin.com/ireqoc/1/edit

于 2013-01-23T15:35:39.847 に答える