html - 为什么 "position: relative"只在 Chrome 中有效？

Question

我有一张 table ，它应该水平和垂直居中。水平居中效果很好(使用“margin: 0 auto”)，但垂直居中(使用“position: relative; top: 50%; transform: translateY(-50%)”)仅适用于 Google Chrome、Firefox、 Edge & MS Explorer 它不起作用。我发现“transform”可以正常工作，但“position: relative”并不适用于所有浏览器。

<table border="1" id="content">
    <tr>
        <td><video id="video" controls></video></td>
    </tr>
</table>

#content {
            margin: 0 auto;
            text-align: center;
            font-family: arial, sans-serif;
            font-size: 15pt;
            position: relative;
            top: 50%;
            -webkit-transform: -webkit-translateY(-50%);
            -ms-transform: -ms-translateY(-50%);
            -moz-transform: -moz-translateY(-50%);
            -o-transform: -o-translateY(-50%);
            transform: translateY(-50%);    
            z-index: 0;
        }

Answer 1

您的问题是相对位置不允许您使用top、right 等定位。所以它只会改变你的 Y。

改为position: absolute;。

#content {
    /* Center #content */
    margin: 0 auto;

    /* Align the text */
    text-align: center;

    /* Setting the font */
    font-family: arial, sans-serif;
    font-size: 15pt;

    /* Setting the position */
    position: absolute;
    top: 50%; left: 50%;

    /* Transforming #content */
    -webkit-transform: -webkit-translate(-50%, -50%);
    -ms-transform: -ms-translate(-50%, -50%);
    -moz-transform: -moz-translate(-50%, -50%);
    -o-transform: -o-translate(-50%, -50%);
    transform: translate(-50%, -50%);    
    z-index: 0;
}

<table border="1" id="content">
    <tr>
        <td><video id="video" controls></video></td>
    </tr>
</table>