让DIV层水平垂直居中页面的两种方法

让一个层水平垂直居中是一个非常常见的布局方式，但在html中水平居中使用margin:0px auto;可以实现，但垂直居中使用外边距是无法达到效果的。（页面设置height:100%;是无效的），这里使用绝对定位+负外边距的方式来实现垂直居中，但同时要考虑页面重置大小的情况，需要使用js来修正。

1、让层水平居中

1 2 3 4 5

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

使用margin:0 auto;让层水平居中，留意宽度和高度必不可少。
2、让层垂直居中

1 2 3 4 5 6 7 8

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

将层设置为绝对定位，left和top为50%，这时候使用负外边距，负外边距的大小为宽高的一半。
3、在重置窗体的时候层依旧保持居中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

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

这里用到的jquery的方法。
resize()事件：当在窗体重置大小时触发。
outerWidth()：获取第一个匹配元素外部宽度（默认包括补白和边框）。