个性原创,打造品牌

拒绝模仿抄袭、拒绝模板建站;
多位资深网页设计师同时设计,让您优中选优;
网站独一无二,品牌轻易提升...

了解详情 >

代码规范,国际标准

后台php+mysql动态管理,功能强大,千万级数据;
前台div+css生成静态,代码精简,访问速度快,
符合w3c国际标准,兼容ie/火狐/苹果等任意浏览器...

了解详情 >

细微高效,全程无忧

域名一个,主机一台;
主机BGP多线路,5G存储空间,流量不限;
新闻录入、图片处理、数据备份、安全监测、网站升级...

了解详情 >

移动时代,机不可失

全新视觉、创新操作;
跨平台兼容,微信无缝对接;
不容错过的手机网络商机,不能错过的手机网站时代...

了解详情 >

搜索领先,锁定访客

在主流搜索引擎的搜索结果中,
网站的名称,排在第一页的第一名,
网站其他相关的3-5个关键词,排在第一页...

了解详情 >

营销利器,决胜千里

全国统一呼叫,品牌企业的象标志。
中国电信4008/4009、中国联通4000/4006,号码任选;
通话资费预存...

了解详情 >
以“信”为主的服务理念,“源”为标杆的服务特点351532641点击咨询010-86203368联系电话
CSS问题设计问题程序问题优化问题

实现CSS制作网页时绝对居中问题

发布时间:2012-09-20      浏览次数:4205

什么叫绝对居中?就是说容器到屏幕左右上下四个方向都有间距,并且随屏幕大小缩放相对不变或者等比例调整,始终居屏幕中间。绝对居中也有两种情况,容器的绝对大小和相对大小。 同时有很多方法可以实现,总结起来大致如下:

1.利用table特性,在width and height all set 100%的时候,可以把容器嵌套在td内形成绝对居中,此时的被嵌套容器可为绝对或者相对大小。(非标准)注意不能加声明!

如是在标准模式下要加样式body,html{height:100%;padding:0;margin:0;}










2.利用负边距方法,绝对定位使容器相对屏幕绝对居中,此时的被嵌套容器只能为绝对大小。(标准)根据margin负值和top left的比例控制,实现随屏幕绝对居中,容器大小改变需要重新调整margin top left的参数:



3.老外给出的另类方法,巧妙利用display:inline-block;IE6.0测试通过。(标准)

注意1.height:100%是关键:2.edgecontainer没有嵌套关系:

这应该算是IE的一个bug,个人对display:inline-block理解有限。edge可以看作一个填充,container现在是一个上下居中的对象,加了背景色能看的更清楚,当然你也可以在container内添加任何绝对或者相对大小容器。但问题在于span只是一个内联元素,在内部添加块级元素是不标准的逻辑。

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">


</span><span style="font-size:10pt;font-family:宋体;">无标题文档<span>

IE6.0环境下实现


4.CSS行为expression控制实现,不过expressionIE独有,并且耗资源严重,尤其在大量使用的时候。(标准)

注意关键定义,不要以为height:100%IE内是没用的:

实时获取屏幕高宽值,分别减去容器高宽值再除以2,得到准确坐标绝对定位:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

http://www.w3.org/1999/xhtml">

</span><span style="font-size:10pt;font-family:宋体;">无标题文档<span>


上一篇:CSS网页制作技巧:让网页内容居中的方法
下一篇:掌握八个CSS布局技巧

Copyright©2016  xinycx.com  All Rights Reserved  北京信源创想科技有限公司  备案号:京ICP备17071760号-1   

京公网安备 11010802036302号


地址:北京市海淀区闵庄路门头馨村北二区33号楼3单元102室  电话:010-86203368  代理域名注册服务机构:北京新网数码信息技术有限公司

北京网站建设 北京网站制作 信源创想 品牌网站建设 企业网站建设 网站设计 APP开发 微信开发 前端切图 DIV+CSS html5切图 APP切图