div垂直居中的几种办法

2009-11-13 文章来源：互联网浏览次数：871 分享文章

将line-height设置为与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>

<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属性?

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

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

下面这种是我个人认为最好的一种

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

上一篇：自定义title样式同时支持firefox ie

下一篇：网页嵌入媒体播放器代码

div垂直居中的几种办法

文章评论(查看全部)