引入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%);
}
Welcome To register!
username
password
href=”#”>Register
效果：
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%);
}
结果跑左边去了水平方向还是没居中~~
还是用最上面的方法吧，如果有更好的，可以互相分享。
参考文档：
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/231346.html原文链接：https://javaforall.net
