使用 top: 50% 和 transform: translate (-50%) 垂直居中会导致加倍的 1px 下划线

Question

此问题仅在标准像素密度屏幕上很明显。浏览器似乎试图将 1px 线定位在半像素 Y 轴坐标上，并决定将 1px 线加倍，以便它位于数学上正确的 Y 轴坐标中。新线的颜色会浅几个色度，并且会对人眼产生 "blurred line" 效果。 CodePen.

包装盒是 "inflated"，其中 %:

padding-top: 38.45%;

父框：

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

子元素：

border-bottom: 1px solid #000000;

如何在不需要父元素和子元素的固定高度的情况下避免这种情况？

Answer 1

这里有一个解决方案：使用 flex 垂直居中。

干掉

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

在子元素上。

然后将此应用到父级：

display: flex;
align-items: center;

所以最后的 css 将是：

#campaign_content .brand .copy_holder .inner_wrapper {
    left: 0;
    width: 100%;
    margin: 0 auto;
    z-index: 2;
}

#campaign_content .brand .copy_holder {
    width: 38.75%;
    background-color: #ffffff;
    position: relative;
    padding: 1em 0;
    display: flex;
    align-items: center;
}

在我看来，使用 flex 垂直居中比转换 hack 更容易和更清晰。

使用 top: 50% 和 transform: translate (-50%) 垂直居中会导致加倍的 1px 下划线

Centring vertically using top: 50% and transform: translate (-50%) causes doubled 1px underline

css

horizontal-line

translate-animation