首頁 > 網頁教程 > CSS > 如何使一個DIV層居中于瀏覽器中?

如何使一個DIV層居中于瀏覽器中?

時間:2010-01-26    作者:本站整理   來源:5icool.org

要使一個DIV層居中于瀏覽器中,有各種不同的方法,本文介紹用百分比絕對定位,與外補丁負值的方法,使DIV容器在頁面相對居中,兼容firefox標準瀏覽器。代碼如下:

div {
    position:absolute;
    top:50%;
    left:50%;
    margin:-100px 0 0 -100px;
    width:200px;
    height:200px;
    border:1px solid red;
} 

這里是使用百分比絕對定位,與外補丁負值的方法,負值的大小為其自身寬度高度除以2。

演示代碼:

提示:可以對代碼修改后再運行。

 

相關推薦
詳解如何用div+css模擬表格對角線
如何用CSS3 border-radius來實現圓角DIV?
div+css 兼容ie6 ie7 ie8 ie9和FireFox Chrome等瀏覽器方法
瀑布流布局:用CSS+DIV等寬格子堆砌瀑布流效果
如何用CSS實現多個子框架居中?
CSS相對定位實現div容器絕對居中的簡單方法分享
CSS實現DIV層的垂直居中代碼分享
CSS水平居中/垂直居中的N個方法 前端開發必收藏
CSS中設置DIV垂直居中的N種方法 兼容IE瀏覽器
CSS:清除多余的標簽讓代碼更加有意義
DIV+CSS布局兩列右列寬度自適應布局的不同實現方法
CSS排版中常遇到的五個問題及解決辦法
CSS網頁布局有關中文排版的九個技巧
Firefox與IE瀏覽器在CSS樣式表中的差異
加一段代碼讓IE6支持hover偽類效果
用CSS來控制字符長度和顯示長度
CSS代碼不同書寫風格的優缺點
正確理解CSS規則的優先級算法
創建高效CSS代碼的五個好習慣
最新全面兼容ie6,ie7,ie8,ff的CSS HACK寫法
理解CSS的查找匹配原理,打造簡潔高效的CSS代碼
掌握跨瀏覽器兼容的CSS代碼編寫準則
21個令人驚嘆的CSS技術(案例)展示
CSS框架到底有那些優點與缺點?
如何使用CSS控制網頁打印頁面格式?
深入理解CSS的margin屬性(外邊距)
CSS中30個最常用的選擇器,你學會了嗎?
CSS進階:用Margin還是用Padding?
WEB前端開發應該注意的問題8點(原創技巧)
xhtml+css 復雜的視覺效果解決方案與技巧(原創技巧)
CSS新手入門教程:CSS代碼編寫須注意的八大細節
資深seo利用css樣式作弊手法全解
CSS新手教程:30個CSS常見問題的分析及解決方法
10種導致CSS布局頁面錯亂的解決方法分享
css教程:解決float屬性的元素父元素高度不能自適應

精彩推薦

熱門教程

炸金花坐在那边好 股票投资平台 陕西快乐10分购买 广东双色球什么时候开奖时间 基金配资 广西快乐十分21选5 奥飞数据股票 广西快乐十分38期开奖结果 北京pk10计划在线计划 东方6十1奖怎么计算 怎样可透视手机上的牌 内蒙快3和值振幅走试图 浙江11选5前三直遗漏 彩票云南11选五 5分时时彩官方网站 辽宁体彩11选5杀号方法 湖北快三预测推荐号码