将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。

Answer 2

也许我遗漏了一些东西（？），但看起来你可以将height:100%;添加到你的#content css中，而不是padding-bottom，它很有效：

https://jsfiddle.net/puajxgsz/

此外，我用另一种方法来做这件事，而不需要绝对定位任何东西。。。因为，嗯，它有点有趣：

https://jsfiddle.net/j0ch7oxj/