Например, они вызывают совершенно иное поведение в отношении автоматического поля.
Посмотрите эту скрипту: https://jsfiddle.net/L1rk46xy/
<style>
.fixed {
display:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
}
.centered {
position:absolute;
margin:auto;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
<div class="fixed">
<div class="centered" style="width:100px;height:30px;" width="200" height="30">
CENTERED
</div>
</div>
У него есть фиксированный элемент для заполнения окна просмотра, а внутри - некоторый центрированный текст. В моем фактическом веб-приложении это индикатор загрузки, который должен быть сосредоточен над контентом. Для того, чтобы margin: auto работать, центрированный элемент должен иметь верхний/правый/нижний/левый все установленные равными нулю, и он должен иметь ширину и высоту. (Примечание: я явно избегаю альтернативного метода центрирования использования верхнего/левого: 50%, потому что для него требуется жестко закодированное отрицательное смещение по размеру, тогда как этот метод будет работать для любого объекта размера).
Обратите внимание на то, как элемент div с текстом центрируется. Теперь удалите атрибут стиля, который устанавливает ширину/высоту и оставляет только атрибуты ширины и высоты HTML в центрированном div. Элемент div больше не центрирован.
Кроме того, если вы замените div на img, то атрибут width/height HTML достаточно, чтобы центрировать его. Что здесь происходит? Почему разница в CSS и HTML-атрибутах, а также между тегами DIV и IMG? Это происходит независимо от того, являются ли эти элементы блочными или встроенными (например, он использует абсолютное позиционирование).
Ответ заключается в том, что элементы div не имеют атрибутов height и width. Если вы укажете эти атрибуты в разметке, они полностью игнорируются. Вы можете только размер div с помощью стилей CSS.
img, с другой стороны, имеют эти атрибуты.