设置一个层垂直居中于浏览器
曾经因为要做一个404页面,当时想放一个图片垂直居中于浏览器,不管浏览器如何伸缩,它都是垂直居中的,但记得当时做得并不是很顺利,一个最简单的页面我当时用了半个多钟都没找到好的解决方法,后来也不知是怎么做好的了,反正就是做得很纠结。
今天逛博客园,发现了一个很简单的方法。记录收藏下。直接上代码,不解释。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>test8</title>
6 <style type="text/css">
7 div.test{
8 width:100px;
9 height:100px;
10 background:#ccc;
11 position:absolute;
12 top:50%;
13 left:50%;
14 margin:-50px 0 0 -50px;;
15 }
16 </style>
17 </head>
18 <body>
19 <div class="test"></div>
20 </body>
21 </html>