css学习笔记:DIV水平垂直居中

作者:好好 来源:好好blog 时间:2009-06-19 12:45:00 

无意中看到以前在电脑上保存的一个html页面,关于div水平垂直居中的问题。

如何实现div水平垂直居中呢?

1.已知宽高度水平垂直居中

position:absolute;top:50%;left:50%:将div的左上角水平垂直居中了。在用:margin-top:-(height/2);margin-left:-(width/2) 调整位置达到居中。

源码:




2.未知高度div水平垂直居中

在一篇贴子中解释到:

标准浏览器中(FF,Opera, Safari等):可将父级元素显示方式设定为TABLE(display: table;) ,内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中,但非标准浏览器是不支持的。

非标准浏览器中:只能在子元素里设距顶部50%,里面再套个元素距顶部-50%来抵消。

源码:


标签:css,web2.0,垂直,居中,前端开发
0
投稿

猜你喜欢

  • asp中的rs.open于conn.execute的区别

    2009-10-29 12:12:00
  • 教你制作IBM LOGO的方法

    2007-10-23 13:34:00
  • Web Design广告字体设计技巧

    2010-06-24 21:52:00
  • Oracle 存储过程总结 二、字符串处理相关函数

    2009-07-07 10:28:00
  • MYSQL数据库表设计与优化(一)

    2010-10-25 19:50:00
  • AJAX打造博客无刷新搜索

    2007-08-23 08:48:00
  • 如何动态产生变量?

    2009-11-18 16:33:00
  • 对“关于购物车的想法”的一些回复

    2009-03-10 18:15:00
  • sql server如何得到插入一条记录后最新的ID?

    2009-11-15 20:06:00
  • SQL 比较一个集合是否在另一个集合里存在的方法分享

    2011-12-01 10:19:26
  • MySQL 5.0.16的乱码问题解决方法

    2011-12-14 18:33:24
  • CSS资料中常见英语词语翻译整理

    2008-08-29 12:50:00
  • Yahoo! BrowserPlus 介绍

    2008-06-01 16:38:00
  • Server 对象 错误 ASP 0177 800401f3 的解决方案 Server 对象 错误 ASP 0177 800401f3

    2009-07-28 17:57:00
  • 如何正确的解决 MySQL中忽略用户的现象

    2008-11-27 16:00:00
  • 各个版本IE合集下载,共存无冲突

    2007-11-29 13:12:00
  • 40个网页设计常用小代码

    2008-01-01 19:27:00
  • 大内存SQL Server数据库的加速剂

    2009-03-06 14:18:00
  • 960 时代的终结

    2011-01-11 19:24:00
  • DIV+CSS常见错误及解决方法

    2008-04-25 22:46:00
  • asp之家 网络编程 m.aspxhome.com