DIV垂直居中，可调整任意大小的DIV

什么也不说看代码

 

样式代码:

1. <style type="text/css">
2. html,body{
3.  height: 100%;
4.  padding:0;
5.  margin:0;
6. }
7. body{
8.  min-height: 200px;
9.  text-align: center;
10.  min-width: 402px
11. }
12. .FirstDIV{
13.  margin-top: -100px; /* SecondDIV高度的一半 */
14.  float: left;
15.  width: 100%;
16.  height: 50%;
17. }
18. .SecondDIV{
19.  clear: both;
20.  border: silver 1px solid;
21.  background: #666;
22.  margin-left: auto;
23.  overflow: auto;
24.  width: 400px;
25.  margin-right: auto;
26.  height: 200px;
27.  text-align: left
28. }
29. </style>

 

页面代码

1. <div class="FirstDIV"></div>
2. <div class="SecondDIV">
3.  <p>测试居中</p>
4.  <p>body{ background-color:#FFF5F0}<br>
5.  div{
6.   position:absolute;
7.   top:50%;
8.   left:50%;
9.   margin:-100px 0 0 -200px;
10.   width:400px;
11.   height:200px;
12.   border:1px #CCCC00 solid;
13.   font-family:Arial,
14.   Helvetica, sans-serif; color:#666666
15.  }
16.  </p>
17. </div>

感谢写此代码的作者(以前复制的时候把作者名弄掉了，现在不记得是who写的了),用了感觉很好