垂直居中对齐div

Question

我想垂直将div与“ centeredContent”类对齐。 我在Kendo Mobile标签中。 也许这就是为什么似乎什么都不起作用的原因。 我可能需要做一些特定的事情。 我已经尝试了一种切实可行的特定解决方案，图像居中，但其下方的无序列表实际上已远远超出了页面的右侧...如果我们可以使无序列表不这样做，那将是高手。 这是使图像居中的原因：

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

并且具有整个选项卡视图的data-stretch =“ true”属性。

这是我现在的代码。 在拥有10个声誉之前，我无法发布图片，但基本上centerdContent div似乎离顶部约20像素，但仍然居高不下：

<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/上查看其他一些选项。