Javascript 垂直居中

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

margin top=“0px”

垂直定心与水平定心相同，效果完美

（为了进一步开发，有必要将其集中在javascript中）

有什么解决办法吗

$（文档）.ready（函数（）{
var width1=$（“正文”）.width（）；
var width2=$（“#main”）.width（）；
var height1=$（“body”）.height（）；
var height2=$（“#main”）.height（）；
var centerw=（宽度1-宽度2）/2；
var centerh=（高度1-高度2）/2；
$（“#main”）.css（“左边距”，centerw+“px”）；
$（“#main”）.css（“页边距顶部”，centerh+“px”）；
});
$（窗口）。调整大小（函数（）{
var width1=$（“正文”）.width（）；
var width2=$（“#main”）.width（）；
var height1=$（“body”）.height（）；
var height2=$（“#main”）.height（）；
var centerw=（宽度1-宽度2）/2；
var centerh=（高度1-高度2）/2；
$（“#main”）.css（“左边距”，centerw+“px”）；
$（“#main”）.css（“页边距顶部”，centerh+“px”）；
});
*{
保证金：0；
填充：0；
边界：0；
浮动：左；
宽度：100%；
位置：相对位置；
文本对齐：居中；
溢出：隐藏；
}
#主要{
宽度：400px；
高度：600px；
背景颜色：灰色；
}
在Chrome中，我对你的代码没有问题，只是在firefox中它不起作用

问题是主体与框的高度相同，您可以将主体的高度设置为100%或使用$（window.height（）；而是$（“body”）.height（）



$（文档）.ready（函数（）{
var width1=$（窗口）.width（）；
var width2=$（“#main”）.width（）；
var height1=$（window.height（）；
var height2=$（“#main”）.height（）；
var centerw=（宽度1-宽度2）/2；
var centerh=（高度1-高度2）/2；
console.log（宽度1+“”+宽度2+“”+高度1+“”+高度2）；
$（“#main”）.css（“左边距”，centerw+“px”）；
$（“#main”）.css（“页边距顶部”，centerh+“px”）；
});
$（窗口）。调整大小（函数（）{
var width1=$（“正文”）.width（）；
var width2=$（“#main”）.width（）；
var height1=$（“body”）.height（）；
var height2=$（“#main”）.height（）；
var centerw=（宽度1-宽度2）/2；
var centerh=（高度1-高度2）/2；
$（“#main”）.css（“左边距”，centerw+“px”）；
$（“#main”）.css（“页边距顶部”，centerh+“px”）；
});				
#主要{
宽度：400px；
高度：600px；
背景颜色：灰色；
}
只要知道盒子的尺寸，就不需要Javascript

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

这是你做数学的方式：

左边距=-宽度/2

页边距顶部=-高度/2


注意：永远不要在css中使用
*
选择器，尤其是如果您要应用10个属性，如示例中所示
您知道可以将对象传递给，因此可以在一次操作中设置多个css值，对吗？Protip:
左边距：自动；右边距：自动
将块居中。使用多个css值时，如何将两个css值分开？比如.css（“保证金顶部”、“价值1”、“保证金左侧”、“价值2”）？也许这是一个清算问题。尝试删除
float:left
css声明。此外，如上所述，要水平居中，您将能够执行
margin:0 auto#main
上添加code>。如果你在通用选择器中添加高度：100%，它会工作：我使用google chrome v45.0和firefox v40.0，通过将“body”更改为window，它都不工作。@DNA，测试一下：它应该工作。另外，使用$（window.load…，而不是documentready。。。。当您需要计算元素的高度/宽度时，您需要加载内容，而不仅仅是DOM。。。。另外，请注意删除多余的*选择器…您是否在第一行？因为在我的情况下，没有这个它是不工作的，有了这个就好了。但在铬合金里我不需要那个线条。@Artur Ziomek:我有一个doctype@DNA：真奇怪。但我很高兴它能为您使用$（window）。加载宽度和高度将在稍后更改，以便响应，并且在移动设备上它们将以%为单位，因此，当他们在移动大小的浏览器上更改窗口时，我无法自己计算。请尝试使用我在此处介绍的方法调整javascript（调整边距），我很肯定它在跨浏览器时会很好地工作。另外，只有两个变量，而不是四个