div设置垂直居中

很久没有碰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>  

参考这里

 标签: CSS, 垂直居中

作者  :  sailor

仅仅看明白了还不够,能把别人给讲明白了才算及格。



最新文章