Центрирование с помощью CSS-преобразования, как это

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

Центрирование VS с Flexbox, как это

  display: flex;
  align-items: center;
  justify-content: center;

Какой из них лучше поддерживается, а какой лучше и целесообразнее?

0
Jay 24 Апр 2017 в 21:26

2 ответа

Лучший ответ

Яблоки и апельсины. absolute удаляет элемент из потока страницы, а flex этого не делает. Это может или не может работать для вас. transform лучше поддерживает браузер, чем flex, но flex довольно широко поддерживается (в настоящее время поддержка браузеров составляет ~ 97%). Поддержка браузера - единственная причина, по которой я бы использовал absolute с transform над flex.

Вы также можете использовать display: table-cell; text-align: center; vertical-align: middle; и делать то же самое, и он имеет лучшую поддержку, чем любой из предыдущих методов. http://caniuse.com/#feat=css-table

Используйте тот, который работает для ваших требований.

0
Michael Coker 24 Апр 2017 в 21:39

Я использую flexbox сам. Центрирование - это только первое, что он может сделать. См. W3Schools для получения дополнительных параметров: реверсирование, перенос, интервал и другие. Чтобы проверить поддержку любого CSS, caniuse.com - отличный ресурс.

0
Super Jade 24 Апр 2017 в 18:50
43595251