div垂直居中的问题

工作和面试时常常会遇到怎么设置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%); }

 

转载于:https://www.cnblogs.com/chengkun101/p/4342511.html