Css translate and centering elements - css

Question

I have div of variable width which I want to center using this code:
div {
background: red;
max-width: 400px;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
https://jsfiddle.net/xooqvyqL/1/
this works well for centering, however the problem becomes when you shrink window size down (lets say you view it on smaller screen/mobile) then you get like a 'padding' around the element taking space, which is not wanted behavior.
This is different as if was like this:
https://jsfiddle.net/xc4w4aph/5/
Note: this is not centered because of variable width (I would use negative margin if it was known width or javascript but I want to do this with pure css) but just for demo purposes if you shrink window size on this example you dont get any kind of 'padding' outside the div taking space.
I am missing something with translate? I dont want this 'padding' behavior.

Answer 1

Because you have set the div to position absolute, it collapses and the margins are reset and the div no longer has a default width of 100%
To restore the maximum, but restricted width, add width:100% before the max-width and everything goes back to 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

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