首页 > 网页教程 > 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属性的元素父元素高度不能自适应

精彩推荐

热门教程