曾经因为要做一个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 >
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 >