Центрирование box и специфичность #card .title

Условие

.parent { position: relative; height: 100vh; }

.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#card .title { color: red; } .card .title { color: blue; } .title { color: green; }

Ответ

box центрируется относительно содержащего блока через 50% и сдвиг на половину собственного размера; для совпавшего #card .title цвет будет red.

Абсолютный элемент ориентируется на позиционированного предка, здесь parent. У CSS-правила с ID выше специфичность, чем у двух классов и одного класса, если остальные условия каскада одинаковы. Без HTML нельзя утверждать, какие селекторы реально совпадают; если #card нет, результат может быть blue или green.