Question

这是我的示例代码：

.container {
    position: absolute;
    left: 50%;
    top: 50%;
}

.container .box{
    position: relative;
    width: 200px;
    height: 200px;
    left: -50%;
    top: -50%;
    background-color: red;
}

在.container元素中，我在宽度和高度上都没有设置任何内容。但是这个例子在水平方面起作用，但在垂直方面不起作用。实际上，top的计算值为-100px，但浏览器不会将.box元素100px移到顶部。

Answer 1

margin-top: -50%;可以解决问题。

Answer 2

这看起来像是webkit中的一个错误。如果您搜索其错误跟踪器，您会不时看到它（14762，23570）。

他们甚至有一个针对这个问题的测试案例，令人惊讶地失败了。你可以在这里试试：https://bug-14762-attachments.webkit.org/attachment.cgi?id=15679

Answer 3

我知道为时已晚，但此处将top: -50%替换为transform: translateY(-50%);

为什么“顶部：-50％;”没有在这种情况下工作，但“左： - 50％”

3 个答案: