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

全部代码：

  
  
  
  
  


  
  
   
    
    
  
        
Welcome To register!
        

            

                

                    username
                    
                
                

                

                    password
                    
                
                

                

                    email
                    
                
                

                

                    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://blog.csdn.net/qq_34735535/article/details/52698608?utm_source=blogxgwz3