Css переводит и центрирующие элементы

Question

У меня есть DIV переменной ширины, которую я хочу, чтобы центрировать с помощью этого кода:

div { 
    background: red; 
    max-width: 400px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
} 

https://jsfiddle.net/xooqvyqL/1/

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

Это отличается, как если бы было так:

https://jsfiddle.net/xc4w4aph/5/

Примечание: это не по центру из-за переменной ширины (я использовал бы отрицательную маржу, если она была известна ширина или Javascript, но я хочу сделать это с чистым css), но только для демонстрационных целей, если вы уменьшаете размер окна на этом примере, вы не получаете никакого «заполнения» за пределами области, занимающей место.

Мне что-то не хватает в переводе? Я не хочу этого поведения «padding».

Answer 1

Поскольку вы установите DIV в положение абсолютной, она разрушается и поля не сбрасываются и ДИВ больше не имеет ширину по умолчанию 100%

Для восстановить максимальную, но ограниченную ширину, добавить width:100% до max-width, и все вернется к норме.

JSfiddle Demo

div { 
 
    background: red; 
 
    width: 100%; 
 
    max-width: 400px; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
}

<div> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis sint enim molestias modi officia fuga corporis, ipsa dicta tenetur, aut dignissimos, perspiciatis cumque assumenda, voluptas harum quis qui cum eligendi voluptatibus dolore! Quos hic 
 
    architecto odio repudiandae aliquid quisquam quidem beatae voluptatem sint praesentium. Tempore eveniet dolorum aspernatur, asperiores neque.</p> 
 
</div>

Answer 2

Используйте этот CSS код:

*{ 
margin:0; 
padding:0; 
} 
div { 
    background: red; 
    max-width: 400px; 
    position: absolute; 
    left: 50%; 
    transform: translateX(-50%); 
}