bootstrap中如何使div上下、垂直居中

使用bootstrap布局，如何使div在指定区域上下、垂直居中并适应各个屏幕？

在垂直方向，可以设置需要居中的div定位为absolute，指定距离top距离50%。水平方向可以指定div的宽度col-lg- ，然后进行对应的偏移。

html页面：

<div class="container-fluid" >
    <div class="login-form  col-lg-4 col-lg-offset-4  col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2 ">
    内容...
    </div>
</div>

css文件：

.login-form {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    min-height: 300px;
    height: auto;
}

页面效果：