Александр, а почему они должны выравниваться сами по себе? Он встроен в строку и ведёт себя как строчный элемент, т. е. заполняет ровно столько пространства, сколько нужно ему.
А margin: auto работает только с block и table. Хак ниже с table — слишком весёлая практика, чтобы её применять, на мой взгляд.
Всё применяется. Смотрите инспектор. Строчно-блочный элемент по ширине подгоняется под контент. Убирайте вашу строчно-блочность, оьорочаивайте текст внутри h1 в span, делайте подчеркивание у span, а не у h1.
Либо делайте обёртку h1 и у неё уже text-align: center.
Максим Виксна, у вас после каждой анимации происходит удаление класса, соответственно, позиция сбрасывается к исходной. Делайте одну общую анимацию.
Либо пишите CSS-анимации последовательно в JS-функции нативными средствами.
Либо пользуйтесь чем-то типа GSAP, где это более автоматизированно с помощью JS.
Роман, ничего не исчезнет, если вы сделаете обработчики на JS. Сделайте отдельный класс с нужными стилями, который будет добавляться, если поле активно.
Умные люди советую на поля ставить readonly. Тогда системная клавиатура не будет появляться, но можно будет ловить клики по полям и с помощью той JS-клавиатуры вбивать нужные данные.
