Web 中元素的水平居中和垂直居中

Question

在编写网页的时候，你可能面临着一个情况下，你需要使用纯 CSS 在水平方向和垂直方向居中一个 DIV。 有以下几个方法来实现这一点，并在此我要告诉你，涉及 CSS 和 jQuery 的我的最爱。 但首先基础知识：

水平居中

这是因为在一个div里面使用了margin属性：

.className{
   margin:0 auto;
   width:200px;
   height:200px;
 }

要只水平居中一个 DIV，您需要指定一个 width，margin 设置为auto。 此方法适用于块级元素。 将其应用到内联元素（如超链接和图像），你需要申请一个额外的规则 display:block 。

水平和垂直居中

水平和垂直居中一个 DIV 与 CSS 是比较麻烦一些。 您需要预先知道 DIV 的尺寸。

.className{
   width:300px;
   height:200px;
   position:absolute;
   left:50%;
   top:50%;
   margin:-100px 0 0 -150px;
 }

通过绝对定位元素，我们可以从它的周围取下，并指定相对于浏览器窗口的位置。 从左边窗口的上半部分抵销 50%，你恰恰有其左上角在页面的中心。 我们剩下要做的唯一一件事就是在 DIV 移动到左侧和顶端有一半的宽度和高度与切缘阴性，要把它完全居中。

使用 jQuery 水平和垂直居中

正如前面提到的，CSS的方法只适用于 DIV 的固定尺寸。 这是 jQuery 的用武之地：

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

这段代码的功能是插入 $(window).resize() 语句，这是每一个窗口由用户调整大小时执行。 我们使用 outerWidth（）和 outerHeight()，因为不同与常规的 width() 和 height()，它们的填充和边框宽度添加到返回的大小。

最后我们模拟一个 resize 事件揭开围绕在页面加载的分区。 使用这种方法的好处是，你不需要知道有多大的分区是。 的主要缺点是，它只能使用 JavaScript 的工作环境。 然而这使得它非常适合丰富的用户界面（如Facebook的）。