使用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;}
页面效果: