Question

我有一个垂直居中的简单div的问题。它总是给Property

垂直居中与水平居中相同，效果很好。

（有必要将其集中在javascript中以便进一步开发）

任何解决方案？

＆＃13;

margin-top="0px"

＆＃13;

$(document).ready(function() {
  var width1 = $("body").width();
  var width2 = $("#main").width();
  var height1 = $("body").height();
  var height2 = $("#main").height();
  var centerw = (width1 - width2) / 2;
  var centerh = (height1 - height2) / 2;
  $("#main").css("margin-left", centerw + "px");
  $("#main").css("margin-top", centerh + "px");
});
$(window).resize(function() {
  var width1 = $("body").width();
  var width2 = $("#main").width();
  var height1 = $("body").height();
  var height2 = $("#main").height();
  var centerw = (width1 - width2) / 2;
  var centerh = (height1 - height2) / 2;
  $("#main").css("margin-left", centerw + "px");
  $("#main").css("margin-top", centerh + "px");
});

＆＃13;

* {
  margin: 0;
  padding: 0;
  border: 0;
  float: left;
  width: 100%;
  position: relative;
  text-align: center;
  overflow: hidden;
}
#main {
  width: 400px;
  height: 600px;
  background-color: gray;
}

＆＃13;

Answer 1

在Chrome中，我的代码没有问题，只有在firefox中它不起作用。

问题在于身体与盒子的高度相同，您可以将身体的高度设置为100％或使用 $（窗口）.height（）; 而不是 $（ “主体”）的高度（）;

JSFiddle

<!DOCTYPE  html>
<html>
	<head>
		<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
		<script>
			$(document).ready(function() {
			  var width1 = $(window).width();
			  var width2 = $("#main").width();
			  var height1 = $(window).height();
			  var height2 = $("#main").height();
			  var centerw = (width1 - width2) / 2;
			  var centerh = (height1 - height2) / 2;
			  console.log(width1+" " +width2 + " " + height1 + " " + height2);
			  $("#main").css("margin-left", centerw + "px");
			  $("#main").css("margin-top", centerh + "px");
			});
			$(window).resize(function() {
			  var width1 = $("body").width();
			  var width2 = $("#main").width();
			  var height1 = $("body").height();
			  var height2 = $("#main").height();
			  var centerw = (width1 - width2) / 2;
			  var centerh = (height1 - height2) / 2;
			  $("#main").css("margin-left", centerw + "px");
			  $("#main").css("margin-top", centerh + "px");
			});				
		</script>
		
		<style>			
			#main {
			  width: 400px;
			  height: 600px;
			  background-color: gray;
			}
		</style>
	</head>
	<body>
	  <div id="main"></div>
	</body>
</html>

Answer 2

只要您知道盒子的尺寸，就不需要Javascript。

#main {
    height: 600px;
    background-color: gray;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -300px;
    margin-left: -200px;
    width: 400px;
}

这就是你的数学运算方式：

margin-left = -width / 2

margin-top = -height / 2

JSFIDDLE

注意：永远不要在css中使用*选择器，特别是如果您要应用示例中的10个属性

垂直居中div

2 个答案: