如何建立一个位置：相对div垂直居中？

Question

如何建立一个位置：相对div垂直居中于其父元素？ 例如：

<div class="parent">
    <div style="position:relative;" class="child">
    </div>
</div>

如何让$（'。child'）在$（'。parent'）中垂直居中？

Answer 1

请尝试使用此css而不是直接使用表格

.parent
{
    height: 100px;
    width: 200px;
    border:1px solid red;
    display:table;
}
.child
{
    height: 100px;
    margin: auto;
    position: relative;
    width: 100px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Answer 2

您可以在CSS

下面试试

.parent
{
    background-color: #FF0000;
    height: 100px;
    width: 200px;
}
.child
{
    background-color: #FFC0CB;
    height: 100px;
    margin: auto;
    position: relative;
    width: 100px;
}

Answer 3

请使用table使其垂直居中。

<div class="parent">
    <table border="0" cellpadding="0" cellspacing="0" align="center" style="width:100%;height:100%;">
        <tr>
            <td align="center" valign="middle" style="width:100%;height:100%;">
                <div>Centered div</div>
            </td>
        </tr>
    </table>    
</div>