Ширина/высота CSS с разным эффектом, чем атрибуты ширины и высоты HTML, в зависимости от типа элемента

Например, они вызывают совершенно иное поведение в отношении автоматического поля.

Посмотрите эту скрипту: 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? Это происходит независимо от того, являются ли эти элементы блочными или встроенными (например, он использует абсолютное позиционирование).

Ответ 1