div设置垂直居中

2013-03-14 约 1 分钟读完搬砖秘籍

很久没有碰CSS前端的东西了，这里记录一个之前的折腾过的一个效果，关于DIV的垂直居中，已经是老生常谈了，我也没有什么新东西，这里就记录一下：

我使用的是下面这种方法：

<style>  
#warp {  
  position: absolute;  
  width:500px;  
  height:200px;  
  left:50%;  
  top:50%;  
  margin-left:-250px;  
  margin-top:-100px;  
  border: solid 3px red;  
}  
</style>  
<body>  
  <div id=warp>Test</div>  
</body>

效果见这里

还有下面两种方法，我没有试验，仅供参考吧。

方法一

<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>

方法二

<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">  
测试内容  
</div>

参考这里