使用top进行垂直居中：50％和transform：translate（-50％）会导致双倍的1px下划线

Question

该问题仅在标准像素密度屏幕上显而易见。似乎浏览器试图在半像素Y轴坐标上定位1px线，并决定将1px线加倍，使其在数学上正确的Y轴坐标。新线的颜色将是几种较浅的色调，并将对人眼造成“模糊线”效果。 CodePen

包装盒使用％：

“充气”

padding-top: 38.45%;

父框：

position: absolute;
top: 50%;
transform: translateY(-50%);

子元素：

border-bottom: 1px solid #000000;

如果不需要在父元素和子元素上具有固定的高度，如何防止这种情况？

Answer 1

这是一个解决方案：垂直居中，弯曲。

摆脱

django.contrib.gis

关于子元素。

然后将其应用于父母：

position: absolute
top: 50%
transform: translateY(-50%);

所以最终的css将是：

display: flex;
align-items: center;

在我看来，与flex一起垂直居中，比变换黑客更容易和更清洁。