div垂直居中的几种办法
关键字: webui div 居中
以前看到dlee讲过，将line-height设置为与DIV的高度相同就可以居中
Java代码
1. <style type="text/css"> 
2. <!-- 
text align center3. .con_div{ 
4. width:400px; 
5. height:300px; 
6. border:1px solid #777; 
7. text-align:center; 
8. display:table-cell; 
9. vertical-align:middle; 
10. background:red; 
11. color:#fff; 
12. line-height:300px; 
13. } 
14. --> 
15. </style> 
16. 
17. <div class="con_div"> 
18. 测试内容ddddddddddd 
19. </div> 
<style type="text/css">
<!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff;
line-height:300px;
}
-->
</style>
<div class="con_div">
测试内容ddddddddddd
</div>
今天又在这里看到的一种方法，使用了CSS的vertical-align属性?
Java代码
1. <style type="text/css"> 
2. <!-- 
3. .con_div{ 
4. width:400px; 
5. height:300px; 
6. border:1px solid #777; 
7. text-align:center; 
8. display:table-cell; 
9. vertical-align:middle; 
10. background:red; 
11. color:#fff 
12. } 
13. /*FOR IE*/ 
14. .fixie{ 
15. width:0; 
16. height:100%; 
17. display:inline-block; 
18. vertical-align:middle; 
19. } 
20. --> 
21. </style> 
22. 
23. <div class="con_div"> 
24. <span class="fixie"></span> 
25. 测试内容 
26. </div> 
<style type="text/css">
<!--
.con_div{
width:400px;
height:300px;
border:1px solid #777;
text-align:center;
display:table-cell;
vertical-align:middle;
background:red;
color:#fff
}
/*FOR IE*/
.fixie{
width:0;
height:100%;
display:inline-block;
vertical-align:middle;
}
-
->
</style>
<div class="con_div">
<span class="fixie"></span>
测试内容
</div>
再次看到一种
Html代码
1. <style> 
2. #warp { 
3.  position: absolute; 
4.  width:500px; 
5.  height:200px; 
6.  left:50%; 
7.  top:50%; 
8.  margin-left:-250px; 
9.  margin-top:-100px; 
10.  border: solid 3px red; 
11. } 
12. </style> 
13. <body> 
14.  <div id=warp>Test</div> 
15. </body> 

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。