html - 垂直居中对齐一个div

Question

我想将我的 div 与类“centeredContent”垂直居中对齐。我在 Kendo Mobile 选项卡中。也许这就是为什么似乎没有任何效果的原因。我可能需要做一些具体的事情。我已经尝试了一个实际有效的特定解决方案，图像居中，但它下面的无序列表实际上远远超出了页面的右侧......如果我们可以让无序列表不这样做那么那就是高手。这是使图像居中的原因:

#outer {
            display: -webkit-box;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }

并且具有整个选项卡 View 的 data-stretch="true"属性。

这是我现在的代码。在我有 10 个声誉之前我不能发布图像，但基本上 centredContent div 似乎距离顶部大约 20px，仍然太高而不能位于中心:

<div data-role="view" data-title="Log In" data-layout="main" data-model="APP.models.home" data-show="showLogin">
    <h1 data-bind="html: title"></h1>
    <div class="centeredContent">
        <div>
        <img class="logo1"/><br/>
        <ul class="listView" data-role="listview" data-style="inset">
            <li>
                <label class="question">Username
                    <input type="text" value="" id="Username" />
                </label>
            </li>
            <li>
                <label class="question">Password
                    <input type="password" value="" id="Password" />
                </label>
            </li>
            <li>
                <label>
                    <button onclick="signIn()" type="button">Submit</button>
                </label>
            </li>
        </ul> 
        </div>
    </div>


    <div data-role="modalview" id="modalviewError" style="width: 90%;">
        <ul data-role="listview" data-style="inset">
            <li>
                <label type="text" value="" id="errMessage"></label>
            </li>
            <li>
                <button onclick="hidePopup()" type="button">OK</button>
            </li>
        </ul>
    </div>




</div>

CSS:

.centeredContent {

        position:absolute;
        height: 100%;
        width:100%;
        top:50%;
    }

    .logo1 {
        background-image: url(../styles/images/VCareInternationalLimited.png);
        background-repeat: no-repeat;
        margin-left: auto;
        margin-right: auto;
        width:254px;
        height:129px;
        text-align: center;
        display:block;
        left:0;
        background-size: 254px 129px;
        margin: auto;
        border-radius:10px;
    }

.listView {
    width:254px;
    border-radius:10px;
    margin-left :auto;
    margin-right :auto;
}

Answer 1

使用 #outer 和 .centeredContent，一种有效的方法是使用以下代码:

#outer {
    display: table;
}
.centeredContent {
    display: table-cell;
    vertical-align: middle;
    display: inline-block /* Add this for IE support */
}

如果这不起作用，您可能不得不摆弄位置(尝试相对和绝对)。您还可以在 http://www.vanseodesign.com/css/vertical-centering/ 查看其他一些选项。 .