Css übersetzen und Zentrierelemente

Question

Ich habe div mit variabler Breite, die ich mag mit diesem Code zum Zentrum:

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

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

dies gut funktioniert zum Zentrieren, aber das Problem wird, wenn Sie die Fenstergröße schrumpfen down (nehmen wir an, du siehst es auf einem kleineren Bildschirm/Handy), dann bekommst du wie ein "Padding" um das Element, das Platz einnimmt, was kein gewolltes Verhalten ist. Diese

ist anders, als ob wie das war:

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

Hinweis: Dies ist nicht wegen variabler Breite zentriert (ich würde verwenden negative Marge wenn es bekannt war, Breite oder JavaScript, aber ich tun möchte, das mit reinem css), aber nur für Demozwecke, wenn Sie die Fenstergröße in diesem Beispiel verkleinern, erhalten Sie keine Art von "Padding" außerhalb des div. Speicherplatzes.

Ich vermisse etwas mit übersetzen? Ich möchte dieses "Padding" -Verhalten nicht.

Answer 1

Weil Sie die div absolute Positionierung gesetzt haben, es bricht zusammen und die Ränder werden zurückgesetzt und die div nicht mehr eine Standardbreite von 100%

zu Stellen Sie die maximale, aber eingeschränkte Breite wieder her, fügen Sie width:100% vor der max-width hinzu und alles wird wieder normal.

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

verwenden CSS-Code:

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