html - 中心对齐方式因台式机和移动设备而异

我正在使用以下代码将div居中并在div中将文本居中。这在我的台式机浏览器中完美运行，但在ipad和iphone上的间隔很差。

Jsfiddle：https://jsfiddle.net/ps7t1rnu/

的CSS

.center-box {
    position: absolute;
    background: #ccc;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    height: 75%;
    padding: 20px;
    text-align: center;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
    border-radius: 25px;
}
.cb-text-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

html

<div class="center-box">
    <div class="cb-text-center"> FOOBAR
        BAR BAR
    </div>
</div>

div正确居中（在浏览器上的jsfiddle上可以看到-但在iPhone或iPad上，它以离奇的间距离开屏幕。

看起来像：



在浏览器和iPad / iPhone上查看jsfiddle全屏结果-https://jsfiddle.net/ps7t1rnu/embedded/result/时，可以看到问题。

谢谢您的帮助..

最佳答案

直到（包括iOS 8.4）的iOS Safari以及直到（包括Android 4.4）的Android浏览器都需要在transform属性前添加前缀。

-webkit-transform: translate(-50%, -50%);

http://caniuse.com/#search=transform

关于html - 中心对齐方式因台式机和移动设备而异，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32420574/