css 转换：翻译以在中心对齐 div 不起作用答案

【问题标题】：the css transform:translate to align a div in the center ist not workingcss 转换：翻译以在中心对齐 div 不起作用
【发布时间】：2018-08-09 08:19:37
【问题描述】：

我对 div 容器使用以下 css 代码

/*media all*/
.rent-a-home-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( 50%, 50% );
    text-align: center;
}

Css 适用于所有浏览器，但不适用于 Internet Explorer。带字体的 div 没有居中对齐。

在这里你可以看到：https://www.immvestwolf.de/rent-a-home-2

谢谢！

【问题讨论】：

必须是 translate(-50%, -50%) 才能使两个轴居中。

标签： css internet-explorer compatibility css-transforms

【解决方案1】：

我使用浏览器检查器工具进行了查看，并立即发现了问题。显然，Internet Explorer 在关闭“）”之前留下的空间存在问题。因此正确的语法应该是：

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

而不是

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

【讨论】：

还有一个来自外部脚本的 .JS 错误...是否可以在没有 air bnb 帮助的情况下修复它？
@tom84 只是在这里喊一下，不确定这是否可行，但是在加载脚本后，您可以尝试用自己的脚本覆盖脚本，但这可能会导致很多错误，所以我不会尝试。
如果您遇到 cdn 脚本抛出错误的问题，您可以下载脚本（在浏览器选项卡中打开脚本的 url）并将其保存在本地，然后将其包含在项目中。
啊好吧！谢谢！这是一种可能！这是我必须修复的巨大 java 脚本错误吗？还是只是一件小事？
你会自己发现脚本是否工作正常，否则你应该修复它

【解决方案2】：

正确的代码是：

.rent-a-home-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    text-align: center;
}

因为没有 MINUS 50% 的代码会将rent-a-home-center div 翻译到更远的右下角，而不是将其翻译到左上角，这样 div 的中点实际上是在页面的中间。

translate() css 文档的链接（有插图）：https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

【讨论】：

虽然这是正确的，但他的问题只是有一个错字。他的css中有“转换：翻译（-50％。-50％）
感谢您的回答...但除此之外，它在 Internet Explorer 中不起作用