Cnscorpio

左右，垂直居中的一个例子

2008-06-12
Web Standard »
2 Comments »

前些天，利华说能不能让某个div或者其他块元素左右，及垂直居中，我想了一会，做了下面这个测试页面，在IE系列，FF，safari，opera下均通过。。主要是position的用法。。其实像很多light box使用的也是类似的方法：
css:

#bd{position:static;display:table-cell;}
#test{width:500px;height:500px;background:#DADADA;position:absolute;top:50%;left:50%;
margin-left:-250px;margin-top:-250px;}

structure:

<body id="bd">
	<div id="test"></div>
</body>

demo here!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>test HW</title> <style type="text/css"> body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;} #bd{position:static;display:table-cell;} #test{width:500px;height:500px;background:#DADADA;position:absolute;top:50%;left:50%;margin-left:-250px;margin-top:-250px;} </style> </head> <body id="bd"> <div id="test"></div> </body> </html>

Tips:You can change the code before run.

左右，垂直居中的一个例子

2 Responses to “左右，垂直居中的一个例子”

说两句吧：