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

我知道这个问题：高度等于动态宽度（CSS 流体布局） https://stackoverflow.com/questions/5445491/height-equal-to-dynamic-width-css-fluid-layout

但我想要更多！我想要一个灵活的容器，它始终具有正方形的纵横比，但最大高度和最大宽度为页面（窗口元素）的 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（甚至更好的跨浏览器）来实现这一点？

Edit:我知道有calc() https://developer.mozilla.org/en-US/docs/CSS/calc对于css3，但是由于移动浏览器支持不佳 http://caniuse.com/#search=calc，我不想用它。

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

        });
    }
});

我终于弄明白了。神奇的成分是视口单元。

给定这个 html 结构：

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

你可以使用这个css（实际上它是scss，但你明白了）让它工作

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;
  }
}

http://codepen.io/johannesjo/pen/rvFxJ http://codepen.io/johannesjo/pen/rvFxJ

对于有需要的人来说，有一个polyfill https://github.com/saabi/vminpoly.