За шрифту. Я не розбирався в цьому досконально з документацією. Але як мені бачиться. Line-height і розмір шрифту працює за принципом (далі грубий приклад): з висоти лінії віднімаємо висоту шрифту і отримуємо відстань між рядків. Далі додаємо його до або після рядка. Через це відстані додаткового / відмінусований якраз блок і з'їжджає.
evg_. Не понял ваш посил. Зрозуміло що буде по центру через line-height рівним height. Так начебто ТС цього і хотів. Або я не наздоганяю.
Олексій. Посил в тому, що ТЗ сам не знає що хоче. У нього і так в наведеному їм прикладі робочий варіант. Я надав ще 2 повністю робочих варіанту, не знаю що ще потрібно.
А на рахунок вашого коду, я мав на увазі що vertical-align зайвий рядок і це властивість особливої ролі в центруванні по вертикалі не грає. Просто вказати line-height = height і все.
evg_. Ні в якому разі, це властивість грає роль. Спочатку вирівнювання ставиться по базовій лінії. А не по центру. Тому блок по центру ну ніяк не буде.
У нього був приклад я б не сказав що робочий, так як він мав зсув по вертикалі.
А спосіб вирішення завдання вже можна залишити на розсуд ТС :)
Можна ще і абсолютно позиціонувати блоки по центру, можна і Флекс - у кожного способу є свої області застосування. Як допустимо у флексів з кросбраузерністю. Адже м'яко кажучи - ні дуже добре. А іноді може знадобитися і підтримка старих браузерів.
Та ви й самі в курсі.
На рахунок абсолютного позиціонування))) можна і на таблицях зверстати.) Тут то і стане в нагоді vertical-align.