前端面试题-----怎么实现div的垂直居中

1.如果是一有宽和高的div实现垂直居中是很好办的，下面看一个例子：

.test{

width:100px;height:100px;position:absolute;background:red;color:#fff;position:absolute;left:50%;top:50%;margin-left:-50px;

margin-top:-50px;text-align:center;}

<div class="test"></div>

展示如下：

如果是没有宽高的，该如何实现呢？

css

.div1{position:absolute;padding:10px;background:red;left:50%;top:50%;

transform: translate(-50%,-50%);

}

html

<div class="div1"></div>

展示图：

随着浏览器窗口的大小，div自动居中在body中。transform 在ie11以上已经都能够使用了。