Динамическое центрирование элемента в контейнере с помощью CSS

Когда дело доходит до написания статей о разработке, я не часто говорю о вещах, выходящих за рамки PHP и JavaScript, главным образом потому, что я работаю с этими языками больше, чем с другими.

Я имею в виду, да, CSS является частью сделки, как и HTML, но в наши дни это ожидается, верно?

Так что, если я когда-либо мог дать краткий совет относительно CSS, то это он (хотя, может быть, мне следует написать больше?). Это тяжело, когда Крис делает такую ​​потрясающую работу с CSS Tricks, но я отвлекся.

В любом случае, вот проблема и решение.

Динамическое центрирование элемента в контейнере

Идея динамического центрирования элемента основана на следующем сценарии:

• Вы делаете вызов API, который будет отвечать набором, скажем, изображений после завершения вызова.
• Вам нужно центрировать каждое изображение в его контейнере.
• Изображения не будут иметь фиксированной высоты, и их нужно будет динамически позиционировать и центрировать внутри контейнеров в пользовательском интерфейсе.

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

Помните: вы не можете поместить такие вещи, как элементы div в элементы li (поскольку div — это элемент блочного уровня), не изменив его с помощью некоторого CSS. И мы хотим избежать этого.

Таким образом, в конечном итоге пользовательский интерфейс может выглядеть примерно так (я знаю, грубо):

Если вы хотите, чтобы каждое изображение помещалось в элемент списка, чтобы оно имело определенную масштабированную высоту и располагалось по центру, попробуйте следующий фрагмент кода :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

Ключом к этому, на самом деле, является стиль преобразования. Согласно МДН :

Функция CSS translateY() перемещает элемент по вертикали в 2D-плоскости. Его результатом является тип данных.

Есть смысл?

Подумайте об этом так: функция translateY возьмет заданный элемент (идентифицированный его селектором) и поместит его, используя указанное значение.

Это о преобразованиях

Вы можете использовать пиксели, проценты или что-то еще, что вам нужно, чтобы это произошло. В данном случае это проценты (и они отрицательные). Хотя я использую пример своей реализации, он также должен быть подсказкой о том, как использовать функцию transformY по отношению к преобразованиям.

Если совместимость браузера имеет значение — а в некоторых случаях она должна быть — ознакомьтесь с этой таблицей. Ты довольно хорошо прикрыт.