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/

将div居中/垂直/水平调整大小

2 个答案: