のCss翻訳センタリング要素

Question

：

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で）しかし、デモの目的のためだけに、この例ではウィンドウサイズを縮小すると、スペースを取っているdivの外側に「パディング」がありません。

翻訳で何か不足していますか？私はこの「詰め物」の振る舞いを望んでいません。

Answer 1

あなたはdivの絶対位置に設定されているので、それが崩壊するとマージンがリセットされないとdiv要素は、もはや100％のデフォルトの幅を持っている

へ最大でも制限された幅に戻すには、max-widthの前にwidth:100%を追加してください。すべて正常に戻ります。

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%); 
}