По какому принципу здесь работает vertical-align?

Вопрос. Почему тогда baseline находится по середине первого блока.
Текст не посередине, а базовая линия посередине. Как это понимать ?

Почитайте про работу vertical-align
vertical-align задает вертикальное выравнивание текста если речь идет о таблицах, если же это инлайн или инлайн блоки то выравнивание самого элемента. Текст в Блоке 1 у вас внутри выровнен по высоте строки, из-за того что сам Блок 1 у вас на всю высоту (100%) текст внутри него выровнен вверху.

Вадим Белкин, https://codepen.io/Cepairda/pen/OZPeyV
1)Хорошо, если выравнивается элемент, почему он тут не по центру ?
2)Каким образом тогда выравнять текст в Блок 1 ?
3)Почему Базовая линия меняется у Элемента Блок1 и Блок 2 становится в центре практически ?

Александр, не поленитесь сами разобраться в работе базовой линии, тут неплохо описано. Или тут
Прочитайте что такое базовая линия и где она проходит. Думаю по визуализации в статьях должно стать понятно почему такое поведение.

Вадим Белкин, правильно ли я понимаю, что по умолчанию базовая линия в обоих блоках идет по текстом. А когда я делаю для первого блока vertical-align: middle, то есть базовая линия становится по центру блока ?

Александр, примерно так. vertical-align: middle не ставит базовую линию по центру, она остается там где была, просто блоки выравниваются по центру

цитата из первой ссылки про инлайн блоки

1. Для мно­го­строч­ных ин­лайн-бло­ков ба­зо­вой ли­ни­ей яв­ля­ет­ся ба­зо­вая ли­ния по­след­не­го строч­но­го бок­са в обыч­ном по­токе.
   
2. Если внут­ри ин­лайн-бло­ка нет бок­сов обыч­но­го по­то­ка, или же у ин­лайн-бло­ка сто­ит over­flow от­лич­ный от vis­i­ble, то ба­зо­вой ли­ни­ей ста­но­вит­ся ниж­няя гра­ни­ца блока.
   

заметьте, что для инлайн блоков, инлайн таблиц и флексов базовая линия работает по разному, а так же для элементов с over­flow: auto

Вадим Белкин, Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.

Так вот что интересно.

https://codepen.io/Cepairda/pen/OZPeyV Ровняем первый
https://codepen.io/Cepairda/pen/QrNqoY Ровняем второй

Как видно, все работает логично, как написано выше. Середина элемента равняется по базовой линии
+ половина высоты X.
Но как это работает в этом случае ?

https://codepen.io/Cepairda/pen/JvXrQb

Я вижу только одно обьяснение, сначала первый блок равняется по базовой линии второго. При этом его базовая линия становится по центру,
после чего по ней равняется второй блок.

Вадим Белкин, Что скажете насчет того, что я выше написал ?

Александр, https://codepen.io/Cepairda/pen/JvXrQb базовая линия никуда не становится, она не смещается данными стилями. В данном примере получилось так что второй блок выровнился своим центром по базовой линии первого элемента, как вы сказали, но базовая линия второго не сместилась, она по прежнему проходит в том же месте, как если бы был другой vertical-align, конкретно

Для мно­го­строч­ных ин­лайн-бло­ков ба­зо­вой ли­ни­ей яв­ля­ет­ся ба­зо­вая ли­ния по­след­не­го строч­но­го бок­са в обыч­ном по­токе

Базовую линию нельзя сместить через vertical-align, если вдруг вы ошибочно так восприняли. Ее может сменить изменение высоты строки или over­flow от­лич­ный от vis­i­ble, т.к. в этом случае как бы весь блок становится одним строчным боксом независимо от кол-ва строк внутри.

Вот тут или тут конкретно описано как работает определенное значение для vertical-align

Вадим Белкин, я не тот пример скинул просто, вот что я имею ввиду
Значение middle для строчных элементов выравнивает середину текущего элемента по середине родительского элемента. Середина родительского элемента подсчитывается следующим образом: берётся высота символа x, делится пополам и добавляется к базовой линии.

https://codepen.io/Cepairda/pen/OZPeyV Ровняем первый
https://codepen.io/Cepairda/pen/QrNqoY Ровняем второй

Как видно, все работает логично, как написано выше. Середина элемента равняется по базовой линии
+ половина высоты X.

Но как это работает в этом случае ?
Ок допустим первый выровнялся по базовой линии второго блока, а по чем тогда равняется потом второй блок, что она становится так ?
https://codepen.io/Cepairda/pen/qYNJeb

Александр, https://codepen.io/Cepairda/pen/qYNJeb в этом случае они выравниваются относительно середин друг друга. Хотя если задуматься в спецификации и логики реализации, то выходит что vertical-align: middle реально смещает базовую линию. Если это и правда так, то я был не прав на счет того что vertical-align: middle не влияет на базовую линию

Вадим Белкин, по-моему в этом случае вообще что-то не понятное. Потому что по логике если, потом второй блок равняется по базовой линии первого по середине + пол высоты x, то расстояние сверху должно быть меньше, чем снизу

Вадим Белкин, этот вопрос, как они равняются, не дает мне спокойно спать несколько дней)