Question

如何更正我的代码，以便在调整大小时将div保持在窗口的中心位置：

＆＃13;

window.addEventListener("resize",handleResize,false);
	function handleResize(){
		var newwidth = window.innerWidth.value;
		var newheight = window.innerHeight.value;
		window.resizeTo(newwidth , newheight);
	}

＆＃13;

Answer 1

肯定不需要javascript编码：例如使用auto margins with a parent container that has absolute or relative positioning instead。

Answer 2

您实际上不需要使用JavaScript来实现此目的。它可以用纯CSS完成。

如果你仍然想要使用JS，你基本上只需要得到window.innerWidth和window.innerHeight并将它们除以2.这将在窗口的确切中心给你一个点。然后从元素和高度的一半中减去宽度的一半，以抵消要居中的元素的left和top位置。这是必要的，因为定位是相对于文档的左上角。

当您使用具有绝对定位元素的CSS解决方案时，请确保将父元素位置设置为相对。

这是一个以JS和CSS为中心的示例。

＆＃13;

var centerDiv = document.querySelector('.center-js'),
    showHideBtn = document.querySelector('.show-hide'),
    winW = 0,
    winH = 0;

// this is just the button click handler.
showHideBtn.addEventListener('click', function() {
  if (centerDiv.style.opacity != 0) {
    centerDiv.style.opacity = 0;
    this.textContent = "Hide CSS centering";
  } else {
    centerDiv.style.opacity = 1;
    this.textContent = "Show CSS centering";      
  }
}, false);

// here is the win resize handler;
function windowResize () {
  winW = window.innerWidth;
  winH = window.innerHeight;
  centerDiv.style.top = (winH/2) - (centerDiv.clientHeight/2) + 'px';
  centerDiv.style.left = (winW/2) - (centerDiv.clientWidth/2) + 'px'; 
}

window.addEventListener("resize", windowResize, false);
windowResize();
centerDiv.style.opacity = 1;

＆＃13;

html {
  position: relative;
  min-height: 100%;
  font-family: sans-serif;
  color: white;
}

div {
  text-align: center;
  line-height: 200px;
  vertical-align: middle;
}

.center-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background: black;
  opacity: 1;
  transition: opacity .5s linear 0s;
  z-index: 1020;
}

.center-css {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
  width: 200px;
  height: 200px;
  background: red;
  z-index: 1010;
}

＆＃13;

<button class="show-hide">Show CSS centering</button>
<div class="center-js">JS centering</div>
<div class="center-css">CSS centering</div>

＆＃13;

调整窗口大小以使用javascript将div保持在中心位置

2 个答案: