3

假设您使用此代码将元素垂直居中

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

（这个问题不是关于对齐的东西，所以请不要对对齐提出建议）

这会导致您的元素变得模糊吗？

本文提到使用 translate 可以将元素定位在半像素值，从而在某些浏览器上造成模糊。浏览器是否仍然这样做，或者它们是否已被修补以不模糊？如果您使用百分比作为参数进行翻译，百分比是否可以计算为非整数像素值（从而允许模糊的可能性），还是四舍五入？EX：如果你使用 66%，这会导致小数像素值吗？ 这篇文章声称你可以设置transform-style: preserve-3d;元素的父元素以避免模糊，但评论中有人声称它对他不起作用..它真的起作用吗？

4

2 回答 2

1

是的，浏览器仍然这样做。在 Chrome 版本 61.0.3163.100 上遇到此问题

也transform-style: preserve-3d;没有解决这个问题。

而是使用 flexbox with 来使项目居中。

.child-not-blurred {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
于 2017-11-01T23:59:03.940 回答
0

一种解决方案（不是最好的解决方案）是设置 Blur: 0。但有一些边缘情况。

于 2015-11-19T08:46:19.320 回答