CSS - marginauto; - Как это устроено

С помощью Маржа: авто центрирование блочного элемента по горизонтали является хорошо известным методом. Но вы когда-нибудь задумывались, почему или как это работает? Чтобы ответить на этот вопрос, сначала нужно посмотреть, как работает margin: auto. Также в смеси есть что авто может сделать это на полях, если это работает для вертикального центрирования, и несколько других вопросов.

Но сначала, что значит авто на самом деле?

Определение авто зависит от элементы, типы элементов а также контекст. На полях, авто может означать одну из двух вещей: занять доступное пространство или 0 пикселей. Эти двое будут определить различные макеты для элемента.

«авто» занимает свободное место

Это наиболее распространенное использование маржи авто мы сталкиваемся часто. Назначая авто к левому и правому краям элемента, они занимают доступное горизонтальное пространство в контейнере элемента одинаково - и, таким образом, элемент центрируется.

Однако это будет работать только для горизонтальных полей (подробнее о Зачем позже), и это также не будет работать с плавающей а также встроенные элементы и само по себе, это также не может работать в абсолютный а также фиксированные элементы (однако мы увидим, как заставить их работать).

Faux Float, занимая доступное пространство

поскольку авто как в правом, так и в левом полях занимают «доступное» пространство одинаково, как вы думаете, что произойдет, когда значение авто дается только одному из тех?

Левое или правое поле с авто будет занимать все «доступное» пространство, заставляя элемент выглядеть так, как будто он был сброшен вправо или влево.

“авто” Вычисляется до 0px

Как упоминалось ранее, авто не будет работать в плавающих, встроенных и абсолютных элементах. Все эти элементы уже есть определились с их макетами, так что нет смысла использовать авто за края и ожидая, что он будет центрироваться так же, как это.

Это победит первоначальную цель использования чего-то вроде поплавок. следовательно авто будет иметь значение 0px в этих элементах.

авто также не будет работать с типичным блочным элементом, если он не имеет ширины. Все примеры, которые я вам показывал, имеют ширину.

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

Что происходит с вертикальными полями со значением авто?

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

“Если “Маржа-топ” или же “край дно” является “авто”, их используемое значение равно 0 "

Почему, ну это пока, загадка. Это может быть из-за типичного вертикального потока страниц, где размер страницы увеличивается по высоте. Таким образом, центрирование элемента по вертикали в его контейнере не приведет к его центрированию относительно самой страницы, в отличие от горизонтального (в большинстве случаев).

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

Это также может быть связано с эффектом обрушения полей (обрушением соседних элементов.” поля), что является еще одним исключением для вертикальных полей.

Тем не менее, последнее представляется маловероятным, поскольку элементы, которые не сжимаются на полях, такие как поплавки и элементы с переполнение Кроме как видимый, по-прежнему назначать 0px вертикальные поля для авто.

Центрирование абсолютно позиционированных элементов

Поскольку случается исключение для абсолютно позиционированных элементов, мы”буду использовать авто значение для центрирования по вертикали и горизонтали. Но перед этим нам нужно выяснить, когда Маржа: авто на самом деле работать так, как мы хотим, чтобы в абсолютно позиционированном элементе.

Вот где появляется другая спецификация W3C:

«Если все три “оставил”, “ширина”, а также “право” являются “авто”: Сначала установить любой “авто” значения для “Левое поле” а также “Маржа правый” до 0 ... "

«Если ни один из трех “авто”: Если оба “Левое поле” а также “Маржа правый” являются “авто”, решить уравнение при дополнительном ограничении, чтобы два поля получили равные значения

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

В спецификации также упоминается нечто подобное для вертикальных полей.

“Если все три “Топ”, “рост”, а также “низ” Авто, установить “Топ” в статическое положение ... ”

“Если ни один из трех “авто”: Если оба “Маржа-топ” а также “край дно” являются “авто”, решить уравнение при дополнительном ограничении, что два поля получают равные значения ... ”

Следовательно, для абсолютного элемента по центру вертикально, его Топ, рост, а также низ значения не должны быть авто.

Теперь, объединив все это, это то, что мы”получу:

Заключение

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

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