中心Div与纵横比

我需要在html视口中居中放置一个div。 它应该以垂直和水平为中心。 但是Div应该保持其纵横比（4/3）并且具有10px的最小边距。

我做了一个Javascript：

function resizeWindow() {
 var wHeight = $(document).height() - 20;
 var wWidth = $(document).width() - 20;
 var gameStage = $("#gameStage");
 if ((wWidth / 4) * 3 <= wHeight) {
  gameStage.css("width", wWidth + "px");
  gameStage.css("height", ((wWidth / 4) * 3) + "px");
  gameStage.css("top", (wHeight - ((wWidth / 4) * 3)) / 2 + 9 + "px");
  gameStage.css("left", "10px");
 } else {
  gameStage.css("height", wHeight + "px");
  gameStage.css("width", ((wHeight / 3) * 4) + "px");
  gameStage.css("left", (wWidth - ((wHeight / 3) * 4)) / 2 + 9 + "px");
  gameStage.css("top", "10px");
 }
}

https://jsfiddle.net/3sw06kvb/

但禁用Javascript的用户将无法使用我的网站。 而HTML / CSS的解决方案应该更快（？）。

我的第一个想法是用一个包装

position: fixed 
top, left, bottom, right = 20px;.

但是我的问题是在保持纵横比的同时垂直和水平地进行分割。

https://jsfiddle.net/xep2mf62/

---

您可以在CSS中尝试以下内容。 CSS3 vh和vw的新单元允许您根据视口的大小设置高度。 height:100vh将使元素的高度等于浏览器窗口的高度。

*** 1vw =视口宽度的1％

1vh =视口高度的1％***

    .wrapper {
      position: relative;
      width:100%;
      height:100vh;
    }
    .childdivision {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height:50vw;
       width:90vw;
      border:2px solid #444;
    }

<div class="wrapper">
  <div class="childdivision">
    </div>
  </div>

链接地址: http://www.djcxy.com/p/75835.html

上一篇: Center Div with aspect Ratio

下一篇: CSS vertical centering a text. Why is it so counterintuitive?