讓一個層水平垂直居中是一個非常常見的布局方式，但在html中水平居中使用margin:0px auto;可以實現，但垂直居中使用外邊距是無法達到效果的。（頁面設置height:100%;是無效的），這里使用絕對定位+負外邊距的方式來實現垂直居中，但同時要考慮頁面重置大小的情況，需要使用js來修正。
讓一個DIV水平居中，直接用CSS就可以做到。只要設置了DIV的寬度，然后使用margin設置邊距0 auto，CSS自動算出左右邊距，使得DIV居中。
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%，這時候使用負外邊距，負外邊距的大小為寬高的一半。相對定位也可以實現
二、行高（line-height）法
如果要垂直居中的只有一行或幾個文字，那它的制作最為簡單，只要讓文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
這段代碼可以達到讓文字在段落中垂直居中的效果。
該方法使用普遍，但是前提是必需設置DIV的寬度和高度。如果當頁面DIV寬度和高度是動態的，比方說需要彈出一個DIV層並且要居中顯示，DIV的內容是動態的，所以寬度和高度也是動態的，這時需要用jQuery可以解決居中。
jQuery實現水平和垂直居中
jQuery實現水平和垂直居中的原理就是通過jQuery設置DIV的CSS，獲取DIV的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口的寬度減去該DIV得寬度，得到的值再除以2即左偏移量，右偏移量算法相同。注意DIV的CSS設置要在resize()方法中完成，就是每次改變窗口大小時，都要執行設置DIV的CSS，代碼如下：
$(window).resize(function(){
$(".mydiv").css({
position: "absolute",
left: ($(window).width() - $(".mydiv").outerWidth())/2,
top: ($(window).height() - $(".mydiv").outerHeight())/2
});
});
此外在頁面載入時，就需要調用resize()。
$(function(){
$(window).resize();
});
此方法的好處就是不需要知道DIV的具體寬度和高度大小，直接用jQuery就可以實現水平和垂直居中，而且兼容各瀏覽器，這個方法在很多的彈出層效果中應用。