Выравнивание блока по центру экрана на CSS по горизонтали и вертикали

Разберем все методы выравнивания блока по центру экрана на CSS:
1) Position, если высота известна https://codepen.io/anna_blok/pen/eqOVQN
2) Position, если высота не известна https://codepen.io/anna_blok/pen/oKvYdW
3) Использование псевдо-элемента https://codepen.io/anna_blok/pen/rXBmag
4) CSS Flexbox (блок растянут полностью) https://codepen.io/anna_blok/pen/YmKaGv
5) CSS Flexbox (блок имеет ограничения по ширине и высоте) https://codepen.io/anna_blok/pen/mNbmmB
6) CSS Grid https://codepen.io/anna_blok/pen/dxbWKR
7) Table & Table-cell https://codepen.io/anna_blok/pen/KOPmjP

✅ Instagram —   / annblok  
✅ TikTok —   / annblok_webdev  
✅ Сайт — http://tpverstak.ru
✅ ВК — https://vk.com/tpverstak
✅ Telegram — https://t.me/tpverstak
✅ Чат Telegram — https://t.me/tpverstakchat

✅ Поддержать канал —    / @annblok_webdev  

Обучение Frontend-разработке — https://frontendblok.com/
Frontend Book PDF — https://tpverstak.ru/frontendbook
Задать вопрос про фронтенд или верстку — https://frontendhelp.me/ru