CSS - Свойство высоты строки, как оно работает (просто)

Итак, в этот простой пример у меня в качестве окончательного результата:

Это очень простой вопрос, но Я просто не могу понять это.

Чтобы добиться центрирования чисел по вертикали, я использовал:

line-height:100px;

Что отлично работает и делал это методом проб и ошибок.

У меня конкретный вопрос: почему line-height: 50px; попадает только на половину пути.

Если small div имеет высоту 100 пикселей и позиционируется относительно него, то половина его не должна центрировать его до половины.

Это меня особенно озадачивает, поскольку, когда я центрирую div :

, я бы использовал: margin: 50px 0 0 50px; , чтобы получить следующее:

Я понимаю этот вопрос может быть излишним, поскольку ответ может быть (вероятно, очень простым), извините! но я думаю, что лучше спросить "почему это не работает";)

Заранее спасибо !!