Css центрування div блоків горизонтальний і вертикальний

При створенні div блоків, напевно ви стикалися з ситуаціями, де необхідно центрувати ваш div горизонтально і вертикально, за допомогою чистого CSS. Наприклад, при створенні спливаючих вікон з формами. Існує кілька способів реалізувати центрування, і в цій статті я розповім про моїх улюблених і простих способи, за допомогою CSS або jQuery.

Для початку, основи:

Горизонтальне центрування на CSS

Це робиться просто, ми використовуємо margin для нашого div блоку.

Для центрування div блоку тільки горизонтально, вам необхідно визначити ширину блоку (width), використовувати властивість auto для відступів (margin) зліва і справа. Цей метод буде працювати для всіх блокових елементів (div, p, h1, і так далі ...). Для застосування горизонтального центрування для строкових елементів (посилання, картинки ...), вам необхідно застосувати параметр display: block;

Горизонтальне і вертикальне центрування на CSS

Центрування div блоку по горизонталі і вертикалі одночасно, трохи хитромудрі. Вам необхідно знати розміри div блоку передчасно.

За допомогою абсолютного позиціонування блоку, ми можемо від'єднати його від навколишніх елементів і визначити його позицію в відношенні до розміру вікна браузера. Переміщаємо div блок на 50% зліва і зверху вікна. Тепер верхній лівий кут блоку знаходиться в центрі вікна браузера. Залишається встановити div блок в центрі сторінки за допомогою переміщення його на половину його ширини вліво і половину його висоти вгору. Ура! Вийшло чудове центрування блоку на чистому css коді.

Горизонтальне і вертикальне центрування на jQuery

Як згадувалося раніше - CSS метод центрування працює тільки з фіксованими розмірами. Якщо розміри не визначені, на допомогу прийде jQuery метод:

Функціонування даного методу полягає в запуску функції resize (), за допомогою рядка $ (window) .resize (). Ця функція працює завжди, коли змінюється розмір вікна браузера. Ми використовуємо outerWidth () і outerHeight (). тому що на противагу width () і height (). вони включають відступи і товщину рамок в розмір, який повертається ними. Останній рядок, запускає процес центрування div блоку при завантаженні сторінки.

Схожі статті

Попередня ◈ Наступна