Центрирование по вертикали с использованием top: 50% и transform: translate (-50%) вызывает удвоение подчеркивания на 1px

Question

Эта проблема заметна только на стандартных экранах с плотностью пикселей. Похоже, что браузер пытается позиционировать линию 1px на полупиксельной координате оси Y и принимает решение удвоить линию 1px, чтобы она находилась в математически правильной координате оси Y. Цвет новой линии будет на несколько оттенков светлее и вызовет эффект "размытой линии" для человеческого глаза. CodePen.

Упаковочная коробка "надувается" с%:

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 намного проще и чище, чем преобразование.