CSS центрування DIV блоків: горизонтальний і вертикальний

1. Горизонтальне центрування на CSS
2. Горизонтальне і вертикальне центрування на CSS
3. Горизонтальне і вертикальне центрування на jQuery

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

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

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

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

.className {margin: 0 auto; width: 200px; height: 200px; }

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

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

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

.className {width: 300px; height: 200px; position: absolute; left: 50%; top: 50%; margin: -100px 0 0 -150px; }

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

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

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

$ (Window) .resize (function () {$ ( '. ClassName'). Css ({position: 'absolute', left: ($ (window) .width () - $ ( '. ClassName'). OuterWidth ( )) / 2, top: ($ (window) .height () - $ ( '. className'). outerHeight ()) / 2});}); // Щоб розпочати голосовий при завантаженні вікна: $ (window) .resize ();

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

Перевага використання цього методу в тому, що ви можете не знати, який розмір div блоку. Головний недолік - це працездатність тільки при включеному JavaScript. Тому цей метод прийнятний для багатофункціональних інтерфейсів, таких як Вконтакте, Facebook і т.д.

далі: YouTube API: плеєр за допомогою YouTube API, jQuery, CSS