工作和面试时常常会遇到怎么设置div垂直居中与浏览器中:包括固定宽高和不固定宽高的
1、固定宽高的div垂直居中
宽高固定的div很容易设置让其垂直居中
<div class="center"> 固定宽高的div垂直居中 </div>
.center {
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%); }