您的位置：首页 > Web前端 > HTML

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

2016-04-09 17:25 483 查看
[java] view
plain copy

1.第一种：  

[java] view
plain copy

<ol class="dp-j"><li><span><span><style type=</span><span class="string"><span style="color: #0000ff;">"text/css"</span></span><span>>   </span></span></li><li><span><!--   </span></li><li><span>.con_div{   </span></li><li><span>width:400px;   </span></li><li><span>height:300px;   </span></li><li><span>border:1px solid #</span><span class="number"><span style="color: #c00000;">777</span></span><span>;   </span></li><li><span>text-align:center;   </span></li><li><span>display:table-cell;   </span></li><li><span>vertical-align:middle;   </span></li><li><span>background:red;   </span></li><li><span>color:#fff;   </span></li><li><span>line-height:300px;   </span></li><li><span>}   </span></li><li><span>-->   </span></li><li><span></style>   </span></li><li><span>  </span></li><li><span><div </span><span class="keyword"><strong><span style="color: #7f0055;">class</span></strong></span><span>=</span><span class="string"><span style="color: #0000ff;">"con_div"</span></span><span>>   </span></li><li><span>测试内容ddddddddddd   </span></li><li><span></div>  </span></li></ol>  

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>  

 

 

 

 
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML div 垂直居中
相关文章推荐
新的分享
章节导航