bootstrap 页面垂直居中_bootstrap div垂直居中+水平居中保持响应式

引入bootstrap4 css文件，只在bootstrap4有效，bs3效果不太行：

垂直居中：为需要垂直居中的div新建如下样式

.col-center-block {

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

}

水平居中，在需要居中的div的外层再加一个div，外层div中加入如下面的class：

row justify-content-center

全部代码：

Register

/*表单样式*/

.myformdiv {

background-color: lightcoral;

opacity: 0.85;

}

/*垂直居中，div上边界距离窗口上边的距离为窗口高度的50%，

实际上此时div内容整体已经偏下，再把整个身子往上移动一半即可

并针对不同浏览器进行兼容。

*/

.col-center-block {

position: absolute;

top: 50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

}

效果：

col-sm-4 col-xs-4这两个栅格不要也可以，试了下，虽然表单大小不会随着窗口伸缩，但是感觉还行，在手机上也还可以。

尝试了下水平居中跟垂直居中用同一种方法：

.col-center-block{

position:absolute;

top:50%;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

position: absolute;

left:50%;

-webkit-transform: translateX(-50%);

-moz-transform: translateX(-50%);

-ms-transform: translateX(-50%);

-o-transform: translateX(-50%);

transform: translateX(-50%);

}

结果跑左边去了水平方向还是没居中~~

还是用最上面的方法吧，如果有更好的，可以互相分享。

参考文档：