先來看一個最普通的實現示例：
創建一個新的html頁面，
XML/HTML Code復制內容到剪貼板
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>無標題文檔</title>
- </head>
- <body>
- </body>
- </html>
在中間，插入CSS代碼
CSS Code復制內容到剪貼板
#warp {
position: absolute;
width:500px;
height:200px;
left:50%;
top:370px;
margin-left:-250px;
margin-top:-100px;
}
在HTML代碼裡調用這個CSS
CSS Code復制內容到剪貼板
共計
71
條數據符合條件
顯示如下：
相關問題
這裡讓一個層居中是一個非常常見的布局方式，但在html中水平居中使用margin:0px auto;可以實現，但垂直居中使用外邊距是無法達到效果的。(頁面設置height:100%;是無效的)，這裡使用絕對定位+負外邊距的方式來實現垂直居中，但同時要考慮頁面重置大小的情況，需要使用js來修正。
1、讓層水平居中
CSS Code復制內容到剪貼板
.className{
width:270px;
height:150px;
margin:0 auto;
}
使用margin:0 auto;讓層水平居中，留意寬度和高度必不可少。
2、讓層垂直居中
CSS Code復制內容到剪貼板
.className{
width:270px;
height:150px;
position:absolute;
left:50%;
top:50%;
margin:-75px 0 0 -135px;
}
將層設置為絕對定位，left和top為50%，這時候使用負外邊距，負外邊距的大小為寬高的一半。
3、在重置窗體的時候層依舊保持居中
JavaScript Code復制內容到剪貼板
$(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()：獲取第一個匹配元素外部寬度(默認包括補白和邊框)。