垂直居中一个div

Question

垂直居中一个div

javascriptjquery

3

我有一个关于垂直居中简单div的问题。它总是给出margin-top="0px"

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

（为了进一步开发，需要在javascript中将其居中）

有什么解决方案吗？

$(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");
});

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

<body>

  <div id="main">

  </div>

</body>

- DNA

你知道你可以将一个对象传递给.css()函数，从而一次性设置多个CSS值，对吧？ - D4V1D

1

专业提示：margin-left: auto; margin-right: auto 可以使一个块居中。 - Niet the Dark Absol

当使用多个CSS值时，如何分离两个CSS值？例如：.css("margin-top","value1","margin-left","value2")？ - DNA

1

也许这是一个清除问题。尝试移除 float: left 的 CSS 声明。另外，如上面的提示，要水平居中，您可以在您的情况下在 #main 上使用 margin: 0 auto;。 - Steven Anderson

1

如果您在通用选择器中添加height:100％，它将起作用：http://jsfiddle.net/vz9ym7ef/1/ - sinisake

显示剩余3条评论

2个回答

0

只要您知道盒子的尺寸，就不需要使用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个属性，就像您的示例一样。

- Lyes BEN

宽度和高度将在响应式设计中稍后更改，并且在移动设备上会以百分比表示，因此当窗口大小变化时，我无法自行进行计算。 - DNA

然后尝试使用我在这里解释的方法（调整边距）来适应您的JavaScript，我相信它将在跨浏览器方面正常工作。此外，只有两个变量而不是四个。 - Lyes BEN

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Artur Ziomek · Accepted Answer

在Chrome中，您的代码没有问题，只有在Firefox中无法正常工作。

问题在于body的高度与框相同，您可以将body的高度设置为100％或使用$(window).height();而不是$("body").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>