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;
}

这是 JS Bin 中的演示：http: //jsbin.com/ireqoc/1/edit

于 2013-01-23T15:35:39.847 回答