Вирівнювання блоку div по вертикалі і горизонталі по центру абсолютним позиціонуванням

Якщо з вирівнюванням блоків div по горизонталі ситуація більш менш ясна, то з вирівнюванням по вертикалі, як правило, виникають труднощі. Тут не все так просто і додаванням лише одного стилю CSS, блок по вертикалі не вирівняються. Потрібно використовувати комбінацію стилів CSS.

Давайте зараз її і розглянемо.

Сьогодні я хочу розповісти про один метод такого вирівнювання, який я найчастіше використовую на практиці.

Отже, припустимо, що у нас є блок div з id #container, який є контейнером. По центру цього блоку потрібно розташувати вкладений блок з id #inner:

Ці блоки мають ширину, висоту і колір фону, які задаються стилями CSS:

У браузері це виглядає зараз в такий спосіб:

Завдання в тому, щоб вирівняти вкладений блок по центру блоку контейнера.

Зробити це можна відредагувавши стилі CSS наступним чином:

Стилі, які були додані, виділені червоним кольором. Це і є та мінімальна комбінація стилів CSS, яка змусить блок вирівняти по центру.

Тепер блок буде відображатися по вертикалі і горизонталі і по центру

Ось живий приклад:

Якщо в якості блоку контейнера ви хочете використовувати елемент body, то до стилів CSS потрібно додати наступне:

Сподіваюся ці стилі допоможуть вам вирішити проблему з вертикальним вирівнюванням блоків div по центру. Успіхів!

До речі, якщо вам буде цікаво, я займаюся веб-аналітикою сайтів. Якщо ви хотіли б зробити ваш сайт більш ефективним і, щоб він приносив більше грошей, веб-аналітика може в цьому допомогти.

Навчальний курс для початківців з основ роботи з веб-аналітикою сайтів на системі Яндекс Метрика тут.

Сторінка з описом моїх послуг з веб-аналітиці: тут.