Css 平移和居中元素

Question

我有 div 可变宽度，我想使用此代码居中：

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

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

这对于居中效果很好，但是当您缩小 window 尺寸时（假设您在较小的 screen/mobile 上查看它）然后您变得像 'padding'元素采用 space，这是不想要的行为。

这不一样好像是这样的：

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

注意：这不是居中的，因为宽度可变（如果已知宽度或 javascript 我会使用负边距，但我想用纯 css 来做到这一点）但仅用于演示目的如果你在这个例子中缩小 window 大小，你不会在 div 之外得到任何类型的 'padding' 采取 space.

我缺少翻译的东西？我不想要这种 'padding' 行为。

Answer 1

使用此 css 代码：

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

Answer 2

因为您已将 div 设置为绝对定位，它会折叠并重置边距，并且 div 不再具有默认宽度 100%

要恢复最大但受限的宽度，请在 max-width 之前添加 width:100%，一切都会恢复正常。

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>

Css 平移和居中元素

Css translate and centering elements

css

centering

translate

responsive