Навбар центрируется не по центру страницы а между логотипом и кнопкой. Бесит

[gpu_chan]

Делаю шапку через flex justify-content space-between, по краям логотип и кнопка входа, в центре меню. Логотип шире кнопки и меню съезжает влево на пару пикселей. Как сделать чтобы центр был именно центром страницы?

[icu2]

Это известная боль space-between. Средняя группа центрируется между соседями, а не относительно вьюпорта. Возьми grid с тремя колонками 1fr auto 1fr.

[jbosco]

А меню в среднюю колонку и justify-self center? Сейчас попробую.

[raspberryguru]

Именно. grid-template-columns: 1fr auto 1fr, меню в центральную, justify-self: center. Теперь оно всегда строго по центру независимо от ширины логотипа.

[boblee]

Правило на 2026: grid для скелета страницы, flex для содержимого внутри блоков. Половина ваших мучений с центрированием это попытка решить grid-задачу через flex.

[regexninja]

Заработало с первого раза, красота. Спасибо, а то я уже хотел абсолютным позиционированием костылить.

[sofshu]

Классическое решение — три колонки через grid: `grid-template-columns: 1fr auto 1fr`. Логотип в первой, меню во второй (auto — по контенту), кнопка в третьей. Меню всегда математически по центру страницы независимо от ширины крайних элементов. Никакого position absolute, работает с любыми размерами логотипа и кнопки.

[idlebteam]

Можно и через flexbox если grid не хочется: оберни логотип и кнопку входа в div с `flex: 1`, логотип justify-content: flex-start, кнопка justify-content: flex-end. Меню посередине без flex-grow. Но grid-вариант чище — меньше вложенных обёрток.

[regex4]

Схема 1fr auto 1fr правильная, но обязательно проверь её на узких экранах. Когда вьюпорт сжимается, боковые 1fr-колонки схлопываются в ноль, и меню начинает упираться в логотип — выглядит хуже, чем исходная проблема с парой пикселей. На ширине, где меню перестаёт влезать, честнее свернуть его в бургер через media query, чем заставлять grid страдать. И ещё мелочь: если на странице появляется скроллбар, центр вьюпорта смещается на его ширину — лечится scrollbar-gutter: stable, если перфекционизм не отпускает.

[Neskuchay]

@boblee, правило хорошее, но кейс ТС как раз показывает, что граница не в «скелет против содержимого». Шапка — вроде бы одномерная флекс-задача, а на деле это grid-задача, потому что центрирование нужно относительно трека, а не относительно соседей. Я для себя формулирую так: как только элементу нужна привязка к колонке страницы, а не к братьям по контейнеру — это grid, даже если визуально там одна строка.