通用垂直居中方法兼容各浏览器-改进

之前写了一篇“拍脑门”得来的在各浏览器都能垂直居中的方法，要兼容各大浏览器，真的不得不借助脚本（JQuery已经使写脚本跟写CSS差不多了），大体思路就是取得要被居中元素的高度和其容器的高度，计算根据两个高度差计算出一个top来，随手写来，测试全部通过，不过事后一样，之前的脚本应该改良一下，不多说，直接给代码：

之前的实现方法：

<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
FixIt_Vertically("div1");
});
function FixIt_Vertically(id) {

var myheight = $("#" + id).outerHeight();
var myfatherheight = $("#" + id).parent().height();
var mytop = (myfatherheight - myheight) / 2;
$("#" + id).css("position", "relative").css("top", mytop + "px");
}
</script>改良后的代码：

<script src="scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
FixIt_Vertically("vertically");
});
function FixIt_Vertically(theclass) {
$("." + theclass).each(function () {
myheight = $(this).outerHeight();
myfatherheight = $(this).parent().height();
mytop = (myfatherheight - myheight) / 2;
$(this).css({ "position": "relative", "top": mytop });
});
}
</script>

看出来了吧？改进的地方就是把原来的id改成了class，这样，只要给每一个要垂直居中的元素加上一个vertically类（class="vertically"），就OK了。

附：

实际使用中再发现什么问题我再来改。

感谢@吝啬你的温柔