Question

我需要在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;.

但我的问题是在保持纵横比的同时使div垂直和水平居中。

https://jsfiddle.net/xep2mf62/

Answer 1

您可以在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>

Answer 2

仍然是JS，但更简单

window.onresize = function() {
  resize();
};

function resize() {
  var wrapper = document.querySelector(".wrapper");
  var wrapperwidth = 1920;
  var wrapperheight = 1080;
  var vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  var ratio = Math.min(vw / wrapperwidth, vh / wrapperheight);
  wrapper.style.transform = `translate(-50%, -50%) scale(${ratio})`;
}

resize();

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1919px;
  height: 1079px;
  overflow: hidden;
  background-color: red;
}

/* demo text (smiley face) */

.wrapper::after {
  content: ":)";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px;
  font-family: "Roboto", 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

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

中心Div与宽高比

2 个答案: