Question

由于<div id='loadingScreen'>，

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

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

Answer 2

当你做位置：绝对时，你实际上是在你想要的位置“手动”放置一个对象，这意味着它不应该自动对齐。

对于正常的垂直对齐 - 尝试line-height：（div-height）;你的css里面有.loadingScreen。

如果您的div是表的一部分，请尝试vertical-align：middle;代替。

Answer 3

您可以这样做：

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

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

Div不会垂直对齐

3 个答案: