当前位置：首页 → 问答吧 → 垂直居中的一个问题

垂直居中的一个问题

时间：2011-09-20

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>让设计居中 - 使用自动空白边让设计居中</title> <style type="text/css"> * { padding:0px; margin:0px; } body { background:#ccc; } #parent { width:500px; height:300px; background:#fff; position: absolute; left:50%; top:50%; margin:-150px 0 0 -250px; } </style> </head> <body> <div id="parent"> </div> </body> </html>
提示：您可以先修改部分代码再运行

这是目前比较常用的垂直水平居中的做法.绝对定位配合负边距实现,但是一直想知道为什么用相对定位却只实现了,水平居中,而垂直居中却没有.请指教!谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>让设计居中 - 使用自动空白边让设计居中</title> <style type="text/css"> * { padding:0px; margin:0px; } body { background:#ccc; } #parent { width:500px; height:300px; background:#fff; position: relative; left:50%; top:50%; margin:-150px 0 0 -250px; } </style> </head> <body> <div id="parent"> </div> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 zjxcdut 于 2011-9-20 23:08 编辑 ]

作者: zjxcdut 发布时间: 2011-09-20

编辑掉.....看错你说的啥了.....这个我也不懂

[ 本帖最后由 ypd007 于 2011-9-21 10:01 编辑 ]

作者: ypd007 发布时间: 2011-09-21