Абсолютное меню по центру?

Question

[art style]

есть меню
height:100px
max-width:1400px
оно должно находиться поверх слайдера с отступом сверху 100px
соответственно:
position:absolute
top:100px
z-index:5

а теперь вопрос
как сделать меню адаптивным к ширине экрана при этом поместим его по центру оси Y?

Answer 1

[ⓒⓢⓢ]

отцентрировать блок, вне зависимости от ширины, можно так:

left: 50%;
transform: translateX(-50%);

Comments

[art style]

уже сделал. но блок не адаптивен при уменьшении экрана

[ⓒⓢⓢ]

art style, при адаптиве меню должно уменьшаться?
попробуйте воспользоваться единицами vw
например, что-нибудь такое: width: 50vw
или если позволяет родитель: width: 100%
без примера, не очень понятно поведение окна в адаптиве

[ⓒⓢⓢ]

art style, так же, вполне что возможно растянуть по экрану с помощью стилей left: 0; right: 0;
(опять же это зависит от родителя)
но тогда центрирование, не понятно от чего должно быть

[art style]

ⓒⓢⓢ, пример тут нужно сделать так же только по центру и ширина должна быть адаптивной

[ⓒⓢⓢ]

art style, так в примере, если для элемента "header" добавить стили:

left: 50%;
transform: translateX(-50%);

то меню будет по центру и ширина будет "сужаться" от размера экрана - у вас разве не так?

[art style]

ⓒⓢⓢ, я уже сделал=)
нужно было всего прописать position:absolute и left:0px;right:0px

[Шохрух Шаймардонов]

art style, так вам уже предложили выше

так же, вполне что возможно растянуть по экрану с помощью стилей left: 0; right: 0;
(опять же это зависит от родителя)
но тогда центрирование, не понятно от чего должно быть

[Шохрух Шаймардонов]

art style, не забудьте отметить ответ решением

Answer 2

[nuffyweb]

Добавьте к меню:

display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
left: 50%;
transform: translateX(-50%);

https://codepen.io/nuffyweb/pen/yLNBdQQ?editors=1100