Как отцентровать абсолютно спозиционированный элемент?

Question

[Евгений Бабкин]

Собственно, вот пример верстки
codepen.io/heyjoe/pen/ZbBOPG
Проблема в том, что при изменении ширины окна браузера (в меньшую сторону), центровка пропадает.
Подскажите, пожалуйста, каким образом задать центровку элементу input-wrapper, чтобы она действовала при изменении ширины окна браузера?

Answer 1

[Кирилл Туровников]

При неизвестных ширине и высоте, можно так:

top:50%;
left:50%;
transform:  translate(-50%,-50%);
-webkit-transform:  translate(-50%,-50%);
-moz-transform:  translate(-50%,-50%);
-o-transform:  translate(-50%,-50%);
-ms-transform:  translate(-50%,-50%);

Answer 2

[holfza]

У вас ширина рассчитывается: width + padding-left + padding-right.
Поэтому:
Вариант 1: сдвигать влево на
margin-left: -304px;
Вариант 2: добавить к input-wrapper

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

Comments

[Евгений Бабкин]

Забыл в демке добавить border-box.
Только суть вопроса не в этом. Как мне сохранить расположение элемента в центре при сужении браузера?

[holfza]

Так он по центру:
c2n.me/3o0Sew3
c2n.me/3o0SkrL

[Евгений Бабкин]

Пока писал демку - сам ответил на вопрос. Про в моей верстке ширина input-wrapper задана в процентах, а в демке написал фиксированную. Тогда такой вопрос. как быть при ширине, заданной в процентах?

Answer 3

[Алекс К]

замените: margin-left: ...
на:

-webkit-transform:translate(-50%,0);
  transform:translate(-50%,0);

вот что получится: codepen.io/anon/pen/epBdmz

Answer 4

[Школьник.]

Например:

position: absolute;
left: 0;
right: 0;
margin: 0 auto;