Question

我有一张桌子，桌子应该水平和垂直居中。水平居中可以正常工作（使用“边距：0自动”），而垂直居中（使用“位置：相对；顶部：50％；转换：translateY（-50％）”）仅适用于Google Chrome浏览器，Firefox， Edge＆MS Explorer无法正常工作。我发现“转换”的工作原理与预期相同，但是“ 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>

Answer 2

#content {
  display:flex;
  justify-content: center;
  align-items: center;
  height:100%;
}
html,body {
  height:100%;
}

如果您想使用flex，可以那样做，仅此而已...

Answer 3

看看这个

https://jsfiddle.net/uniak/z9vmnde6/

#content {
  font-family: arial, sans-serif;
  font-size: 15pt;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#content td {}

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

为什么“位置：相对”仅在Chrome中有效？

3 个答案: