我在给一个定位元素垂直居中的时候惯性的设置了
.element { position: absolute; top: 50%; transfome: translateY(-50%); } |
设置完成后没有发现问题，后来无论时美工还是测试都反应这个元素字体模糊。
我还是第一次遇见这个问题。后来经过反复排除认定了时 transform 的锅。
经过查资料时应为要移动的元素的高度时奇数的。css 动画在渲染非整数的 px 时就会出现字体模糊。甚至时上下反复移动。
解决办法：
给定居中元素偶数高度(基本没用，很多情况我们无法写死高度)。
不用动画用margin,不过margin的百分比是相对于父级的。我们还是要知道元素的准确高度。
.element { position: absolute; top: 50%; margin-top: ...; } |
给与定位元素一个父级。使用height:100% 然后设置flex布局的垂直居中
.father { display:flex; align-items:center } |
上文内容不用于商业目的，如涉及知识产权问题，请权利人联系博为峰小编(021-64471599-8017)，我们将立即处理。
