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

【问题标题】：Centring vertically using top: 50% and transform: translate (-50%) causes doubled 1px underline使用 top: 50% 和 transform: translate (-50%) 垂直居中会导致双倍的 1px 下划线
【发布时间】：2018-01-16 08:18:15
【问题描述】：

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

包装盒用 %“膨胀”：

padding-top: 38.45%;

父框：

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

子元素：

border-bottom: 1px solid #000000;

如果不需要在父元素和子元素上设置固定高度，如何防止这种情况发生？

【问题讨论】：

在我的帖子中对 CodePen 的评论 - 该问题旨在在 Chrome 浏览器上进行预览。 FireFox 浏览器会显示更大的问题 - 它以不同的方式处理弹性项目的垂直百分比填充，因此 CodePen 在那里有点混乱。我有 forked CodePen 包括 @cup_of 建议的解决方案（解决我的问题）和 FireFox 浏览器的垂直百分比填充后备

标签： css translate-animation horizontal-line

【解决方案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 更容易、更简洁。

【讨论】：