css - 居中一个 div 垂直/水平同时调整它的大小

Question

正如问题所说，我正在尝试将 div 居中在屏幕中间 horizontally/vertically并同时调整它的大小。

调整 content 的大小没有任何问题当屏幕变小甚至居中时 wrapper当它在大屏幕上显示时，当我尝试调整屏幕大小时出现问题，因为 wrapper有一个 max-height属性，当调整屏幕大小时它永远不会垂直居中(因为它一直占据 300px)。

我想要 div居中的 ( wrapper ) 永远不会超过 300px并且将始终居中(均为 vertically/horizontally )。

这是我的代码:

HTML:

<div id="wrapper">
     <div id="content">
     </div>
</div>

CSS:

html{
   width: 100%;
}

body{
    width: 100%;
    background-color: red;
    margin: 0;
}

#wrapper{
    position: absolute;
    max-width: 300px;
    max-height: 300px;
    width: 100%;
    height: 100%;
    margin: auto;
    top: 0; left: 0; bottom: 0; right: 0;
}

#content{
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
    background-color: yellow;
}

JSFiddle .

我尝试了很多配置，并在 StackOverflow 上查看了很多问题，但它们中的任何一个都对我有用，因为它们中的大多数仅适用于 horizontally/vertically将 div 居中或调整大小，但不是两者。

注意:我不能使用 flexbox我想尽可能多地维护实际的 CSS代码，如果可能的话。

如何避免使用 max-height (这破坏了我的 vertically 居中)并得到相同的行为？

---

编辑 div vertically/horizontally 已经居中. 我想要的是正方形永远是正方形并且永远居中。对不起，如果我没有说得很清楚。

现在内容正在按我的需要调整大小(作为正方形)，问题仅在于在调整大小的同时垂直对齐。

---

编辑 2:如果您想查看我在上述编辑中提到的效果，请水平调整我的示例 JSFiddle 上的屏幕大小，您将看到效果。

提前致谢!

Answer 1

您可以使用 CSS3 transform 轻松做到这一点。这取决于您要提供的浏览器支持。

我建议将您的内容 absolute 放置在包装的 50% 处。然后，您可以使用 50% 的负翻译。 top: 50% 和 left: 50% 会将您的内容放在左上角的中间位置。负翻译 50% (translate(-50%, -50%)) 会将内容的一半宽度移到左侧，将一半高度移到顶部。

#content{
   position: absolute;
   width: 100%;
   height: 100%;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

您可以看到更新后的 jsfiddle

---

编辑

我第一次误解了你问题的一部分。但是您可以轻松地将您的解决方案的一部分与我的解决方案合并，以获得您想要的结果。

您只需要将 height: 100%; 替换为 padding-bottom: 100%; 我之前的回答:

#content{
  position: absolute;
  width: 100%;
  padding-bottom: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

查看此更新 jsfiddle .