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

Question

The issue is noticeable on standard pixel density screens only. It seems browser is trying to position 1px line on the half-pixel Y-axis coordinate and takes the decision to double 1px line so that it sits in mathematically correct Y-axis coordinate. The color of the new line will be several shades lighter and will cause "blurred line" effect for the human eye. CodePen.

Wrapping box is "inflated" with %:

padding-top: 38.45%;

Parent box:

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

Child element:

border-bottom: 1px solid #000000;

How can this be prevented without needing to have fixed heights on parent and children elements?

Answer 1

Here is a solution: center vertically with flex.

Get rid of

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

on the child element.

Then apply this to the parent:

display: flex;
align-items: center;

So the final css will be:

#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;
}

In my opinion, vertically centering with flex, is alot easier and cleaner than the transform hack.