如何始终使用纯CSS使视口中的灵活正方形居中？

我知道这个问题：

但是我想要更多！！我想要一个灵活的容器，它始终具有正方形的纵横比，但最大高度和最大宽度为页面（窗口元素）的100%，并且顶部始终垂直和水平居中

像这样：

// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
-      #######      -
-      #cont-#      -
-      #ainer#      -
-      #######      -
---------------------


// container matches width of the window
// container-width = 100%;  container-height = absolute-container-width
--page---
-       -
-       -
-#######-
-#######-
-#######-
-#######-
-       -
-       -
---------

是否可以通过纯css（甚至更好的跨浏览器）实现这一点

编辑： 我知道css3有很多功能，但是由于这个原因，我不想使用它

Edit2: 好像我说得不够清楚。我需要包装的高度和宽度与窗口的高度或宽度相匹配，具体取决于哪个较小。方形容器不得超过窗口高度/宽度的较小值

这就是使用jQuery的方式：

 // container/#main-wrapper has top: 50%,  left: 50%, position: absolute  via css  
 $(window).resize(function () {
    var $ww = $(window).width();
    var $wh = $(window).height();

    if ($ww > $wh) {
        $('#main-wrapper').css({
            height: $wh,
            width: $wh,
            marginTop : ($wh / 2) * -1,
            marginLeft : ($wh / 2) * -1
        });
    } else {
        $('#main-wrapper').css({
            height: $ww,
            width: $ww,
            marginTop : ($ww / 2) * -1,
            marginLeft : ($ww / 2) * -1

        });
    }
});

---

如果您将前面的概念更进一步，使用类似的div作为容器，怎么样。容器增加了最大高度和宽度。我试过了，容器没有向我扔滚动条。我必须说，我自己的行为很有趣。这对你有用吗

<div id="container">
    <div id="centered">A DIV</div>
</div>

    #container {
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    position:absolute;
    width:200px;
    height:200px;
    max-width:100%;
    max-height:100%;
    background:#00f;
    padding:0;
}
#centered {
    background: green;
    bottom: 0;
    height: 80px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
}

潜水艇
#容器{
排名：0；
底部：0；
右：0；
左：0；
保证金：自动；
位置：绝对位置；
宽度：200px；
高度：200px；
最大宽度：100%；
最大高度：100%；
背景：#00f；
填充：0；
}
#居中{
背景：绿色；
底部：0；
高度：80px；
左：0；
保证金：自动；
位置：绝对位置；
排名：0；
右：0；
宽度：80px；
}

更新的小提琴：

html

---

查看此

编辑：写了以下内容后，我在Twitter上上诉，并得到了Brian Johnson的回复。他提出了一个在语义上不是100%完美的解决方案，但它非常好，我肯定会使用它。他要求我在这次讨论中分享这一点

我现在也有同样的问题，我只是把这个问题打出来，虽然我不能回答，但我想和大家分享我到目前为止的发现，以防它能帮助任何人想出最终的解决方案

为了澄清这一点，我需要将我的内容放入一个正方形中，如果是纵向的，则填充浏览器宽度的60%，如果是横向的，则填充浏览器高度的60%

width: 60%;
height:0;
padding-bottom: 60%;

但是，此正方形不得超过视口的宽度或高度

使用我发现的技术，我成功地创建了流体正方形，但它仍然超过了视口

width: 60%;
height:0;
padding-bottom: 60%;

我曾尝试将该技术用于

景观

，但不起作用。（您可以在上面的示例中看到该代码，请注意。）

我不能使用简单的

max height

属性，因为高度是由

padding bottom

属性计算出来的

---

我曾考虑过按照其他人的建议添加一个额外的div（C-Link的帖子真的很有趣），但我不知道如何让它完成我们希望它在这里完成的任务。

我终于找到了答案。神奇的元素是视图端口单元

鉴于此html结构：

.l-table
  .l-table-cell
    .square

您可以使用这个css（实际上是它的SCS，但您已经有了想法）使其工作

html,
body{
  height: 100%
}
l-table{
  background: orange;
  display: table;
  height: 100%; 
  width: 100%;
}
.l-table-cell{
  display: table-cell;
  vertical-align: middle;
  border: 2px solid black;
}
.square{
  background: red;
  margin: auto;
  @media (orientation:landscape) {
    width: 70vh;
    height: 70vh;
  }
  @media screen and (orientation:portrait) {
    width: 70vw;
    height: 70vw;
  }
}

---

对于那些需要它的人来说，有一个。

通过调整窗口的大小，属性会发生变化，你不能用CSS进行计算，所以答案是否定的。你想要的是一个模式窗口。如果你的内容是一个图像，这会更容易。。。jQuery通常用于促进这一设计特性。让我考虑一下。@Daniel:有calc，但它在移动设备上的浏览器支持非常差。根据：更多信息：@Marc Audet:为什么这样更容易？你能告诉我更多吗？@hugo-谢谢，很高兴注意到这一点：）这很好，但不灵活。@hugo-我玩过一些游戏，结果很有趣。检查一下，让我知道这是否适合你？这很有趣，但仍然不灵活。调整窗口大小，你就会看到你想要的。这不是正方形，宽度始终为100%，垂直居中似乎无法正常工作。至少在chrome上。你想要这样吗。加高度：200px；把它弄成正方形。复制测试应用程序中的代码并运行它。你应该得到好结果。也许我说得不够清楚。我更新了这个问题。这真的很酷。我会试着根据我的需要修改它。谢谢！这回答了你的问题吗？如果你能接受它，那就太好了：）嘿，sanjaypoyzer，我会再给它一到两个星期，因为它很好，但并不完美（它无法调整页面大小）。如果你能在你的答案上添加一个链接，甚至发布一个新的链接，那也会很酷。

html,
body{
  height: 100%
}
l-table{
  background: orange;
  display: table;
  height: 100%; 
  width: 100%;
}
.l-table-cell{
  display: table-cell;
  vertical-align: middle;
  border: 2px solid black;
}
.square{
  background: red;
  margin: auto;
  @media (orientation:landscape) {
    width: 70vh;
    height: 70vh;
  }
  @media screen and (orientation:portrait) {
    width: 70vw;
    height: 70vw;
  }
}