css转换：转换为对齐中心的div不起作用

Question

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

/*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

我看了一下浏览器检查工具，立即看到了问题。显然，Internet Explorer在您关闭“）”之前会出现问题。因此，正确的语法是：

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

代替

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

Answer 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