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高度的一半。