css. Як відцентрувати елемент на сторінці? (2)

Основна css

Ще один метод, побудований за принципом чітко визначених відстаней, фіксованого позиціонування та фішки з css3 -- transform для вирівнювання:

.container-centered { position: fixed; top: 50%; left: 50%; width: 200px; height: 101px; background: #fff; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

Має 2 переваги над варіантом, коли позиціонування абсолютне + від’ємний маржин + чіткі розміри елемента, бо більш універсальне рішення, яке не має обов’язкових маржинів та точних розмірів елемента.

Побачив тут: https://stanhub.com/tutorials/css-horizontally-vertically-align-element/

А тут приклад, як відцентрувати елемент на сторінці за допомогою display: flex