几天以来,我在使用css3变换(transform: translateY(-50%);)垂直居中的非常酷的技术时,我正在尝试一个相当大的问题。这里描述:
https://davidwalsh.name/css-vertical-center实际上,包含在这个div中的元素(文本或图像)会变得模糊。
我尝试了很多技巧(transform: translateZ(0);backface-visibility;(1)规模;translateX(calc(-50% + 0.5px));过滤器:模糊(0);等等)。
唯一有效的方法是使用另一种技术来垂直居中div,如display:table-cell.
但是,出于明显的原因(比如添加div容器的义务),我宁愿不这样做。
我有两个问题:
首先,你知道一个有效的技术吗?第二,这是最后(或最新)版本Chrome的新问题吗?
谢谢你的帮助,
大卫PS:所有旧的解都表示在这里基于webkit的模糊/扭曲文本后期动画通过translate3d不要工作
目前,我发现只有一个好的解决方案:
transform: translate(-50%, -50.1%)
- 0.1% -一般用户看不到这个
- 无需计算值
希望chrome会修复它-自2014年以来存在的错误))))