html 中div垂直居中的三种方式

时间:2024-11-01 08:45:58

1、第一种:

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

2、第二种:

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

3、第三种:

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

 

关注公众号,第一时间获取JAVA、大数据知识或面试题