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未与中心对齐。

您可以在此处看到：this maven guide

谢谢！

Answer 1

我看了一下浏览器检查工具，立即看到了问题。显然，Internet Explorer在您关闭＆＃34;）之前会留下空间问题。因此，正确的语法是：

# 1. default (10.1 ms per loop)
print(synchronize(foo))
    _a    _b     _c  agent       date
0  1.0  11.0  111.0      1 2010-01-01
1  1.0  22.0  111.0      1 2011-01-01
2  1.0  22.0  333.0      1 2012-01-01
3  4.0  22.0  333.0      1 2013-01-01
4  5.0  55.0    NaN      2 2010-01-01
5  5.0  55.0  666.0      2 2013-01-01
6  7.0  77.0  777.0      2 2015-01-01
7  8.0  77.0  777.0      2 2016-01-01

# 2. sync with one column (54.9 ms per loop)
print(synchronize(foo,'_c'))
    _a    _b     _c  agent       date
0  1.0  11.0  111.0      1 2010-01-01
2  1.0  22.0  333.0      1 2012-01-01
5  NaN   NaN  666.0      2 2013-01-01
6  7.0  77.0  777.0      2 2015-01-01

# 3. sync with two columns (53.4 ms per loop)
print(synchronize(foo,['_a','_b'))
    _a    _b     _c  agent       date
0  1.0  11.0  111.0      1 2010-01-01
1  1.0  22.0  111.0      1 2011-01-01
3  4.0  22.0  333.0      1 2013-01-01
4  5.0  55.0    NaN      2 2010-01-01
6  7.0  77.0  777.0      2 2015-01-01
7  8.0  77.0  777.0      2 2016-01-01

而不是

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

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

2 个答案: