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

[egor9725]

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

[ruslan_pro]

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

[denis6377]

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

[nullgit8572]

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

[stas_nova82]

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

[matvey_web7]

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

[flowgo4491]

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

[savva_io]

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