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

Question

该问题仅在标准像素密度屏幕上很明显。似乎浏览器正在尝试将 1px 线定位在半像素 Y 轴坐标上，并决定将 1px 线加倍，以便它位于数学上正确的 Y 轴坐标中。新线条的颜色会淡几个深浅，对人眼造成“线条模糊”的效果。代码笔。

包装盒以 % 为“膨胀”：

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 进行垂直居中，比 transform hack 更容易和更干净。