transform：translateY（-50％）div元素失去了质量

Question

我正在设计一台发电机。今天，重构代码我遇到了一个问题，我在我的路径中已经多次看过，但不知怎的，我从未渗透到它的存在。即 - 在CSS转换中添加属性后的div：translateY（-50％）失去其内部元素的质量，有人知道为什么会发生这种情况吗？元素模糊，特别是字体和横幅。

我正在使用此行垂直居中diva

如果我删除此行，一切都恢复正常

#message {
    width: 500px;
    top: 50%;
    transform: translateY(-50%);
    left: 50%;
    margin-left: -250px;
    position: fixed;
    background: #fff;
    z-index: 201;
    padding: 20px;
    box-sizing: border-box;
}

Answer 1

我认为这是因为og＆＃34;半像素＆＃34;。

你告诉div改变-50％。 如果div的高度为101px，则50％将为50.5px，并且你不能有半像素。

您可以通过设置一个特定的高度来检查这是否是问题，该高度可以分成两部分而不会分成两部分。