网页高度垂直居中

2015/01/01 36508

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style type="text/css">
    *{
         margin: 0;padding: 0;
       }
       body{
            background-color:#63F;
            position:relative;
            display:block;
            width:100%;
            height:100%;
       }
    div{
        margin:auto;
        position:relative;
        border: 1px solid gray;
        top:50%;
    }
      #D1{
      background-color:#F00;
      width:100px;
      height:100px;
      margin-top:-50px;
      }
    #D2{
        background-color:#0F0;
        width:200px;
        height:200px;
        margin-top:-100px;
    }
    #D3{
        background-color:yellow;
        width:300px;
        height:300px;
        margin-top:-150px;
    }
    #D4{
        background-color:#0FF;
        width:400px;
        height:400px;
        position:fixed;
        margin-top:-200px;
        left:50%;
        margin-left:-200px;
        }
</style>
</head>
<div id='D4'>
<div id='D3'>
<div id='D2'>
<div id='D1'>
</div>
</div>
</div>
</div>
<body>
</body>
</html>