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执行此操作）但仅为了演示目的，如果您在此示例中缩小窗口大小在div之外没有任何“填充”空间。

我遗漏了翻译的内容？我不想要这种“填充”行为。

Answer 1

因为您已将div设置为绝对位置，它会折叠并重置边距并且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%);
}

Css翻译和居中元素

2 个答案: