max-width 似乎不适用于使用 translate 的绝对定位的 div

Question

我有一个绝对定位的 div，它使用translate 水平和垂直对齐。我的代码的问题是 max-width 似乎不适用于这个 div。它总是小于我为max-width 设置的值。其实我也想让 div 响应，所以不能使用width 属性，否则会出现水平滚动条。我还尝试了width:100% 和max-width:500px，但仍然没有运气。如何强制 max-width 工作以使 div 能够响应？

目标

1. Div 必须像现在使用 absolute 和 translate 一样保持水平和垂直居中对齐
2. 当浏览器窗口宽度大于此值时，Div 必须拉伸到 max-width 值，即 500 像素。
3. 当浏览器窗口缩小时，Div 宽度必须减小以适应浏览器宽度 - 这将使我的 div 响应。

这是我的代码/演示：

.center {
  border:1px solid red;
  max-width:500px;
  height:150px;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  text-align:center;
}

<div class="center">This div is horizontally & vertically center aligned.<br />The text is also horizontally center aligned.</div>

更新

每个人都在这里建议我无用且不相关的解决方案。请尝试通过以下图片理解问题：

仅使用 width:500px 时：

仅使用 max-width:500px 时：

同时使用 max-width:500px 和 width:100% 时：

问题：即使我同时使用 max-width:500px 和 width:100%（请参阅水平滚动条），div 也不会保持响应：

Answer 1

最大宽度可防止超出您指定的范围，但您可以与 & max-width 混合搭配以获得最佳效果

对我来说，如果我拉伸浏览器宽度，最大宽度是可以的。它也停在宽度 502px 处。为什么是 502？因为 500px + 1px（2 次）= 502。

更新 这个位置给你带来了困难，因为 position=absolute 试图占据整个视口（屏幕）空间。这比您要显示的 div 的空间大。我还将宽度缩小到 98%，因为如果您使用 100%，则不会显示边框。记住边框没有考虑到全尺寸。看上面。祝你有美好的一天！

.center {
  border:1px solid red;
  width:98%;
  max-width:500px;
  height:150px;
  position:fixed;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  text-align:center;
}

<div class="center">This div is horizontally & vertically center aligned.<br />The text is also horizontally center aligned.</div>

Answer 2

max-width 不能单独工作，它需要基于 Width

.center {
  border:1px solid red;
  max-width:500px;
  width:100%;
  height:150px;
  position:absolute;
  top:50%;
  left:50%;
  -ms-transform:translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  -o-transform:translate(-50%, -50%);
  -moz-transform:translate(-50%, -50%);
  transform:translate(-50%, -50%);
  text-align:center;
}

<div class="center">This div is horizontally & vertically center aligned.<br />The text is also horizontally center aligned.</div>