工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的
1、固定宽高的div垂直居中
宽高固定的div很容易设置让其垂直居中
<div class="center">
固定宽高的div垂直居中
</div>
.center {
width:500px;
height:300px;
position:absolute;
top:50%;
left:50%;
margin-left:-250px;
margin-top:-150px;
background:#3CF;
}
2、未知宽高的div垂直居中
<div class="center">
未知宽高的div垂直居中
</div>
.center {
position:fixed;
top: 50%;
left: 50%;
background-color:#f60;
width:50%;
height:50%;
-webkit-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-ms-transform:translateX(-50%) translateY(-50%);
-o-transform:translateX(-50%) translateY(-50%);
transform:translateX(-50%) translateY(-50%);
}