CSS实现div垂直居中 div上下居中显示



采用CSS3中的transform属性可以实现div垂直居中。具体实现方法如下：

<style type="text/css">
.main{
width:200px;
height:150px;
float:left;
border:1px solid #FF1F00;}
.main_in{
width:150px;
height:100px;
border:1px solid #2A7F55;
position:relative;
top:50%;
transform:translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
-moz-transform:translateY(-50%);
}
</style>

效果图如下：

注意：需要居中的divposition属性值应采用relative，IE8不兼容

另外还有一种实现垂直居中的方式：

position: absolute;
top: 50%;
width:200px;
height:100px;
margin-top:-50px;

需要居中的div采用绝对定位，距离顶部top属性50%，margin-top属性取负值，绝对值为div高度的一半。