html - iOS 8+ 上的播放按钮不居中

Question

我一直在寻找这个问题的解决方案，但直到现在我还没有找到。

我需要给视频一个绝对位置，它的大小会根据这个定位而改变(通过给上、右、下和左值)。当我这样做时，运行 iOS 8+ 的 iPhone 上的播放按钮不再居中。

这是正在发生的事情的打印:

Print screen from iPhone 5c

我已经能够在此处的 JSFiddle 上重现此错误:https://jsfiddle.net/hwgnzwzf/2/ - 它似乎在我设置“左”属性时开始发生。

<div class="video-holder">
    <div class="video">
        <div class="video-wrapper video-wide">
            <video controls poster="http://placehold.it/200x200">
                <source src="" type="video/mp4"/>
            </video>
        </div>
    </div>
</div>


.video{
    position: absolute;
    top:0;
    left:40%;
    right:20%;
    bottom:0;
}

/edit:在 Doml 输入后，我尝试只设置“正确”值和“最大宽度”，但最终结果是一样的。

Answer 1

问题是，iOS 需要两个属性，top/left |底部/右侧，你只需将其设置为 40% 将绝对容器“居中”的更好解决方案是将它放在屏幕的中心，然后将它放在宽度的一半位置:

left:50%;
transform: translateX(-50%);

我没有 iPhone，所以请告诉我这是否适合你

edit://哦，如果你想“调整大小”，只需添加一个 max-width 并删除“right”属性