css transform:translate 在中心对齐 div 不工作

Question

我对 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

谢谢！

Answer 1

正确的代码是：

.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 的中间点实际上在页面中间。

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

Answer 2

我使用浏览器检查器工具查看了一下，立即发现了问题。显然 Internet Explorer 在您关闭“)”之前离开的 space 有问题。因此，正确的语法是：

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

而不是

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

css transform:translate 在中心对齐 div 不工作

the css transform:translate to align a div in the center ist not working

css

compatibility

internet-explorer

css-transforms