绝对定位元素的子元素的垂直居中不起作用答案

【问题标题】：Vertical centering for an absolutely positioned element's child doesn't work绝对定位元素的子元素的垂直居中不起作用
【发布时间】：2013-05-12 10:51:51
【问题描述】：

我需要帮助我将黄色框垂直居中。

<html>
<head>
    <title></title>
</head>
<body style="border-collapse: collapse;">
    <div style="margin: 100px; width: 100px; height: 200px; background-color: gray; border: 1px solid gray;">
        <table style='background-color: white; width: 100%; height: 100%; border-collapse: collapse; vertical-align: top;'>
            <tr>
                <td style='height: 33.33%;'>
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; top: -50%; height: 100%; display: table-cell; vertical-align: middle;">
                            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">A</div>
                        </div>
                        <div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
                            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">B</div>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td style="height: 33.33%;">
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
                            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">C</div>
                        </div>
                    </div>
                </td>
            </tr>
             <tr>
                <td style="height: 33.33%;">
                  <div style="position: relative; width: 100%; height: 100%;">

                        <div style="position: absolute; bottom: -50%; height: 100%; display: table-cell; vertical-align: middle;">
                            <div style="border: 1px solid #ccc; width: 30px; height: 30px; background-color: yellow; ">D</div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

通过为每个框添加 margin-top: 50%; 来修复它。

【讨论】：