在CSS中，要实现垂直和水平居中对齐并不像人们预期的那么容易。只有当你知道容器的高度时，你才能真正实现垂直对齐。如果是这种情况，你可以使用绝对定位来实现。

具体做法是将顶部/左侧位置设置为50%，然后使用负边距（设置为高度/宽度的一半）将容器拉回到居中位置。

示例代码如下：

#mydiv { 
    position: absolute;
    top: 50%;
    left: 50%;
    height: 400px;
    width: 700px;
    margin-top: -200px; /* -(1/2 height) */
    margin-left: -350px; /* -(1/2 width) */
}

当然，如果你不知道容器的高度，你可以使用JavaScript获取计算后的高度，并同样使用JavaScript设置边距。

原文链接：[http://jsbin.com/ipawe/edit](http://jsbin.com/ipawe/edit)

本文介绍了使用CSS和jQuery来实现水平和垂直居中的两种方法。其中CSS方法适用于具有固定大小的div，而jQuery方法适用于事先不知道大小的div。

CSS方法的代码如下：

.className{
    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;
}

其中，`left:50%; top:50%;`将div的左上角设置为屏幕中心位置，`margin:-75px 0 0 -135px;`将其向左上方移动固定大小div宽度和高度的一半。

jQuery方法的代码如下：

$(document).ready(function(){
    $(window).resize(function(){
        $('.className').css({
            position:'absolute',
            left: ($(window).width() - $('.className').outerWidth())/2,
            top: ($(window).height() - $('.className').outerHeight())/2
        });
    });
    // To initially run the function:
    $(window).resize();
});

这段代码会在页面加载完成后执行，并在窗口大小改变时重新计算div的位置，使其保持在屏幕中心。

如果不想使用jQuery，可以使用CSS方法或者修改jQuery方法使用纯JavaScript实现。CSS方法在jQuery方法上方有示例代码。如果需要居中大小未知的div，也可以修改jQuery方法来实现。

在文章中还提供了一个实例展示了这些技术的应用。

如果OP不想使用jQuery，可以使用CSS方法或者修改jQuery方法使用纯JavaScript实现。CSS方法在jQuery方法上方有示例代码。如果需要居中大小未知的div，也可以修改jQuery方法来实现。

问题出现的原因是选择了解决方法2，在火狐浏览器中不起作用。解决方法是使用解决方法1或解决方法3。

解决方法1是通过设置元素的固定尺寸，并使用绝对定位将其水平和垂直居中。

解决方法2是通过设置元素的宽度、高度和行高，并使用文本对齐方式将单行文本水平和垂直居中。

解决方法3是通过使用display:table和display:table-cell属性，以及垂直对齐方式将元素水平和垂直居中，无需指定具体的尺寸。

对于火狐浏览器中解决方法2不起作用的问题，可以尝试使用解决方法1或解决方法3来实现水平和垂直居中。