Исправьте верхнюю позицию div, даже когда div меняет размер и сохраняет центрирование div

Question

У меня есть div, который становится выше, когда пользователь выбирает определенный флажок.

Поведение этого div по умолчанию состояло в том, что когда флажок установлен, div растет одинаково сверху и снизу. Верх становится выше, а низ становится ниже. Мне бы хотелось, чтобы верхняя часть div была фиксированной и позволяла только нижней части становиться ниже, чтобы содержимое div, которое присутствует независимо от состояния флажка, не перемещалось, когда пользователь выбирает или снимает флажок.

Я обнаружил, что добавление этого стиля в div делает свое дело.

.fixed-top {
  position: absolute;
  top: 25%;
  width: 400px;
}

Однако, это также перемещает div в левую часть страницы. Мне нужно, чтобы это было в центре. Элемент div должен иметь фиксированную ширину, если только thear-окно уже этой ширины, и в этом случае элемент div должен стать уже.

Если я изменю атрибут position на относительный, то div будет отцентрирован надлежащим образом, как описано выше, но вершина больше не является фиксированной.

Как я могу сделать верхнюю часть div фиксированной, в то же время удовлетворяя требованию ширины, указанному выше?

Answer 1

Итак, вот как я бы решил это

Во-первых, пожалуйста, убедитесь, что родительский элемент div имеет собственную ширину (в вашем случае width: 100%;) и имеет какую-либо позицию (например, position: относительный;) в противном случае этот трюк не сработает.

.fixed-top {
  position: absolute;
  top: 25%;
  width: 400px;

  // add this
  left: 50%;
  transform: translateX(-50%);
}

Хитрость заключается в том, чтобы установить атрибут левого элемента div на 50% ширины его родительского элемента, а затем переместить (translateX) его обратно (-50 %) на половину ширины div.

Вы также можете использовать этот трюк для атрибута top.

top: 50%;
transform: translateY(-50%);

или использовать его для центрирования как сверху, так и слева

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

РЕДАКТИРОВАНИЕ:

Если вы хотите, чтобы атрибут div position был относительным, вы можете использовать

.fixed-top {
  position: relative;
  // instead top, we use margin-top
  margin-top: 50px;
  width: 400px;

  // add this
  margin-left: auto;
  margin-right: auto;
}

Надеюсь, это поможет;)

Answer 2

.fixed-top {
  position: fixed;
  left: 50%;
  text-align: center;
  margin-left: -120px;
  top: 0;
  width:240px;
}

Попробуйте этот код ....