绝对定位的div如何居中显示
分类:个人日志
来源:原创
时间:2014-11-01 17:42:06
其实div定位不难，无论是普通页面还是框架页面，想让它居中显示，关键在于第一个（最外面）div的定位。
代码如下：
<div style="position:relative; width:300px; height:300px; background:#CCC; border:1px solid #000; margin:0 auto;">
<div style="position:absolute; left:0; top:0; width:100px; height:100px; background:#F00;">
顶部div
</div>
<div style="position:absolute; left:0; bottom:0; width:100px; height:100px; background:#FF0;">
底部div
</div>
</div>
最外面那个div的定位要必须是相对定位relative，margin:0 auto是让他居中，然后里面的div要使用绝对定位absolute。top:0;是顶部对齐 bottom是底部对齐。
- 默认分类(20)
- J2EE(25)
- Java(56)
- PHP(55)
- SEO(10)
- 网页设计(20)
- 网站建设(37)
- 数据库(7)
- JavaScript(17)
- JQuery(6)
- MySQL(20)
- SQL Server(6)
- Access(1)
- Oracle(6)
- office(6)
- Dreamweaver(4)
- Photoshop(12)
- Flash(9)
- Fireworks(13)
- CSS(14)
- HTML(4)
- .NET(7)
- ASP(2)
- DB2(1)
- Ajax(2)
- Linux(12)
- Struts(7)
- Hibernate(8)
- Spring(2)
- Jsp(22)
- Asp(8)
- C#(3)
- C++(1)
- 网络安全(5)
- 软件工程(7)
- XML(1)
- English(2)
- 计算机等级考试(2)
- 计算机病毒(4)
- 个人日志(76)
- 互联网(15)
- ActionScript(10)
- Android(3)
- 数据结构与算法(1)
- 游戏策略(3)
- 美文翻译(2)
- 编程开发(19)
- 计算机应用(4)
- 计算机(10)
- Unity3d(6)
- 其他(1)
- egret(1)
