Почему margin 0 auto не работает
Перейти к содержимому

Почему margin 0 auto не работает

  • автор:

Почему margin:auto не работает с position:absolute в CSS

Чтобы горизонтально выровнять элемент с абсолютным позиционированием, используйте left: 0 , right: 0 и margin: auto с указанной шириной. Применение margin-left: auto и margin-right: auto в этом контексте не приведёт к выравниванию, поскольку абсолютно позиционированный элемент выпадает из нормального потока документа.

Скопировать код

.center-abs < position: absolute; left: 0; right: 0; margin: auto; width: 100px; /* Укажите нужную ширину */ >

Для того, чтобы выровнять элемент также и вертикально, примените top: 0; bottom: 0; и укажите margin: auto; при фиксированных размерах элемента.

Разбираемся в механике позиционирования и полях

Попробуйте понять взаимосвязь позиционирования и свойства margin в контексте различных сценариев.

Только горизонтальное выравнивание

Для горизонтального выравнивания достаточно left , right и margin: auto без использования top и bottom :

Скопировать код

.center-abs-horizontal < position: absolute; left: 0; right: 0; margin: auto; width: 200px; /* Определяется ширина */ >

Вертикальное выравнивание

Для вертикального выравнивания примените top: 0; bottom: 0; margin: auto; , заменяя соответственно left и right :

Скопировать код

.center-abs-vertical < position: absolute; top: 0; bottom: 0; margin: auto; height: 50px; /* В этом случае ключевую роль играет высота */ >

Горизонтальное выравнивание с трансформацией

Можно горизонтально выровнять элемент с помощью transform :

Скопировать код

.center-abs-transform < position: absolute; left: 50%; transform: translateX(-50%); width: 200px; /* Ширина важна для расчёта поля */ >

Обратите внимание, что transform меняет только визуализацию элемента, не влияя на его размеры в макете.

Когда поля не работают

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

Визуализация

Представьте себе ситуацию, когда вы пытаетесь центрировать картину в музее с помощью магнитов. Родительский div — это стены музея, а дочерний div — картина:

Стена (родительский div) Картина (дочерний div)
�� (margin-left: auto) ��️ ( position: absolute; )
�� (margin-right: auto)

Абсолютно позиционированные элементы не подвержены «магнитному влиянию» полей.

Стена ��— Нет взаимодействия —��️ Блуждает в пространстве (абсолютное)

Наблюдаем магию: Практический пример

Визуальное восприятие важно. Вы можете ознакомиться с различными методами выравнивания с абсолютным позиционированием на JSFiddle: [http://jsfiddle.net/38tjjdpd/16/].

Основы абсолютного позиционирования

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

Между Relative и Absolute

Использование margin: 0 auto; отлично подходит для элементов с relative позиционированием, поскольку они остаются в нормальном потоке документа.

Осторожно: Возможные сложности

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

Полезные материалы

  1. Абсолютное позиционирование внутри относительного | CSS-Tricks — принцип работы абсолютного позиционирования внутри относительно позиционированного родителя.
  2. position – CSS: Каскадные таблицы стилей | MDN — детальное описание свойства CSS position от Mozilla.
  3. CSS Layout – Горизонтальное и вертикальное выравнивание | W3Schools — советы по горизонтальному и вертикальному выравниванию в CSS.
  4. position | Codrops CSS Reference — свойство position и его значения в CSS.
  5. Урок | DigitalOcean — различные способы выравнивания с использованием CSS от Мэтта Смита на DigitalOcean.
  6. Кевин Пауэлл – Видеоурок по центрированию в CSS – YouTube — видеоурок по центрированию в CSS от Кевина Пауэлла.

Не работает выравнивание margin: 0 auto;

Author24 — интернет-сервис помощи студентам

Со свойством min-width не работает margin: 0 auto, с max-width и width всё нормально :/
Вот код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
 html> head> title>CSS3/title> link rel="stylesheet" type="text/css" href="styles.css"> /head> body> div class="container"> form action="#" method="get"> div class="username-block"> label for="First">Full/label> label for="Last">Name/label> div class="username"> input id="First" type="text" name="username" placeholder="First"> input id="Last" type="text" name="username" placeholder="Last"> /div> /div> div class="email-block"> label for="email">Email/label> div class="email"> input id="email" type="email" name="email"> /div> div class="subject-block"> label for="subject">Subject/label> div class="subject"> select id="subject" class="subject"> option name="subject" value="none">None/option> option name="subject" value="advertise">Advertise/option> option name="subject" value="partnership">Partnership/option> option name="subject" value="general">General/option> /select> /div> /div> div class="usertext-block"> label for="usermessage">Your Message/label> div class="usermessage"> textarea id="usermessage" name="usermessage">/textarea> /div> /div> div class="data"> input type="submit" name="data"> /div> /div> /form> /div> /body> /html>
1 2 3 4 5 6 7 8 9
*{ margin: 0; padding: 0; } .container{ min-width: 904px; margin: 0 auto; }

Почему не работает margin: 0 auto?

Lynn

p.s У вас у container есть родитель у которого своя ширина не на 100%, расширьте его.

Ответ написан более трёх лет назад
Нравится 1 2 комментария
atumbochka @atumbochka Автор вопроса

   
О нашем проекте Наше вдохновение Присоединяйтесь

2021 год - международный год мира и доверия!

У container же нет родительского элемента. Похоже, у меня какая-то проблема, потому что раньше с таким же кодом всё работало, да и у вас в ссылке всё правильно, не знаю, почему так.

Как работает margin: 0 auto?

Наверное извечный вопрос всех новичков — как же все таки работает margin
Почитав справочники и форумы, перелопатив множество различных роликов, увы, я так и не смогла ответить на этот вопрос себе.
Взываю к мастодонтам — как же мне все-таки отцентрировать блок?
html

      Car Repair   
jdsnvckjd
*,*::before, *::after < box-sizing: border-box; >.container
  • Вопрос задан более года назад
  • 996 просмотров

1 комментарий

Простой 1 комментарий

вариантов куча — https://www.w3.org/Style/Examples/007/center.ru.html
Решения вопроса 2
Kkrit @Kkrit Автор вопроса

немного пошаманив с max-width и другими значениями ширины у меня получилось
Не знаю, это магия какая-то, возможно, дело в основном в том, что мое окно не слишком широкоформатно и с открытой консолью как раз около 1200px и выходит ширины
62ee606a562c1872159277.png
62ee60864dee0629733249.png

Ответ написан более года назад
Комментировать
Нравится Комментировать

iamlorddop

Yulia Khavaeva @iamlorddop

margin просто задает отступы для блока. Ограничьте container определенной шириной (Например width: 1180px;) и потом тем что вы зададите блоку margin: 0 auto; означает что вы задаете сверху и снизу отступ ноль (первая цифра в margin), значение auto значит что вы центрируете блок. у margin это внешний отступ от блока
margin: (сверху снизу) (справа слева);
margin: справа слева снизу справа;
margin: со всех сторон;

Ответ написан более года назад
Комментировать
Нравится Комментировать
Ответы на вопрос 2

FeST1VaL

В чем именно вопрос?
Способов много. Ваш вариант работает, потому не могу понять в чем именно вопрос.

Ответ написан более года назад
Нравится 1 2 комментария
Kkrit @Kkrit Автор вопроса

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *