CSS - marginauto; - Як це працює

Використання margin: auto центрувати елемент блоку горизонтально є добре відомою технікою. Але ви коли-небудь замислювалися, чому або як це працює? Щоб відповісти на це, ми спочатку повинні поглянути, як маржа: авто працює. Також у суміші є що авто можливо, можна зробити в полях, якщо це працює для вертикального центрування, і ще кілька інших питань.

Але спочатку, що робить авто насправді?

Визначення авто залежить від елементи, типи елементів і контексті. У полях, авто може означати одну з двох речей: зайняти вільний простір або 0 px. Ці дві будуть визначити різні макети для елемента.

"auto" Приймаючи доступний простір

Це найбільш поширене використання маржі авто ми часто зустрічаємося. За призначенням авто до лівого і правого країв елемента вони рівномірно займають наявне горизонтальне простір в контейнері елемента, і таким чином елемент центризується.

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

Faux плавати, приймаючи доступного простору

З авто в правих і лівих полях займають "доступний" простір однаково, що, на вашу думку, станеться при значенні авто дається тільки одному з них?

Лівий або правий поле з авто займе весь доступний простір, щоб елемент виглядав так, як він був змитий праворуч або ліворуч.

“авто” Обчислюється до 0px

Як згадувалося раніше, авто не буде працювати в плаваючих, вбудованих і абсолютних елементах. Всі ці елементи вже є вирішили їх макети, тому не можна використовувати авто за межі і очікував, що це буде зосереджено так само.

Це переможе первинну мету використання чогось подібного плавати. Звідси авто буде мати значення 0px у цих елементах.

авто також не буде працювати на типовому елементі блоку, якщо він не має ширини. Всі приклади, які я показував вам, мають ширину.

Ширина значення авто матимемо 0px поля. Ширина елемента блоку зазвичай охоплює його контейнер, коли він є авто або 100% і, отже, маржа авто буде обчислено для 0px у такому випадку.

Що відбувається з вертикальними полями зі значенням авто?

авто у верхньому та нижньому полях завжди обчислюється до 0px (за винятком абсолютних елементів). Специфікація W3C говорить так:

“Якщо “margin-top” або “margin-bottom” є “авто”, їхнє значення 0

Чому, ну, що поки що, таємниця. Це може бути через типовий потік сторінок, де Розмір сторінки збільшується по висоті. Отже, центрування елемента вертикально в його контейнері не призведе до того, що він буде виглядати по центру, відносно самої сторінки, на відміну від того, коли це робиться горизонтально (у більшості випадків).

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

Це може бути також через ефект згортання поля (колапс суміжних елементів” поля), що є ще одним винятком для вертикальних полів.

Проте останнє здається малоймовірним - оскільки елементи, які не згортають свої поля - такі як Floats, та елементи з переповнення окрім видно, все ще призначають 0px вертикальних полів для авто.

Центрування абсолютно позиціонованих елементів

Оскільки існує виняток для абсолютно позиціонованих елементів, ми”буду використовувати авто значення центрувати вертикально і горизонтально. Але перед цим нам потрібно з'ясувати, коли буде margin: auto насправді працює так, як ми хочемо, щоб це було в абсолютно позиційному елементі.

Ось де входить інша специфікація W3C:

- Якщо всі три “зліва”, “ширина”, і “право” є “авто”: Перший набір “авто” значення для “margin-left” і “margin-right” до 0… "

- Якщо жодна з трьох не буде “авто”: Якщо обидва “margin-left” і “margin-right” є “авто”, вирішити рівняння під додатковим обмеженням, що обидві поля отримують рівні значення "

Це дуже багато говорить про це горизонтально авто поля для захоплення рівних просторів значення для зліва, ширина і право не повинно бути авто , їх значення за замовчуванням. Отже, все, що нам потрібно зробити, це дати їм деяке значення в абсолютно позиціонованому елементі. зліва і право повинні мати рівні значення для ідеального центрування.

Спектр також згадує щось подібне для вертикальних полів.

“Якщо всі три “зверху”, “висота”, і “знизу” є автоматичними, встановлені “зверху” до статичної позиції… ”

“Якщо жодна з трьох не є “авто”: Якщо обидва “margin-top” і “margin-bottom” є “авто”, вирішити рівняння під додатковим обмеженням, що обидві поля отримують рівні значення ... ”

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

Тепер, об'єднуючи все це, це ми”отримаю:

Висновок

Якщо ви коли-небудь захочете очистити елемент на своїй сторінці праворуч або ліворуч, не перекриваючи його (наприклад, що відбувається з float), пам'ятайте, що є можливість використовувати авто для маржі.

Перетворення елемента в абсолютне так, щоб воно могло бути по центру вертикально, не може бути чудовою ідеєю. Є й інші варіанти, такі як flexbox і CSS transform, які більш підходять для них.