Расположение объекта
 

<div class="lock"></div>

.lock {
    font-size: 8px;
    position: relative;
    width: 11em;
    height: 11em;
    border-radius: 2em;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    background-color: rebeccapurple;
  }

Не пойму, почему left 50% сработало, а top нет.

Пример, в котором работает top

.lock {
    font-size: 8px;
    position: absolute;
    width: 11em;
    height: 11em;
    border-radius: 5em;
    top: 50%;
    left: 50%;
    box-sizing: border-box;
    background-color: rebeccapurple;
    transform: translateX(-50%);
  }

изменил только position: absolute;

Скрин https://skr.sh/sJeMa8hGbxR?a

Посмотрим доку...
http://htmlbook.ru/css/top

В твоих огрызках html и css нет родительского элемента. Т.ч. не понятно от кого будут рассчитываться те 50% для top...

Спасибо