PROMULGATOR

    沐枫自然

    上海市闵行区
    Html
    Css
    Js

    
                        


                        

                            


h1 {
	text-align:center;
}
.pop-win {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.5);
}
.pop-win div {
	position:absolute;
	width:400px;
	height:200px;
	padding:10px;
	background: rgba(31,175,0,0.6);
	border:1px solid white;
	border-radius:6px;
}

/*CSS 水平和垂直居中方法【 1  CSS3】：  将父级元素设为盒子模型，使子元素水平垂直居中。
.pop-win {
	display:flex;
	justify-content:center;
	align-items:center;
} */

/*CSS 水平和垂直居中方法【 2 CSS2】： 将要设置居中的元素分别向 下 和 向 右 各偏移50%，再将margin值设为 负的 元素本身的宽高咸半
.pop-main {
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-200px;
}*/

/*CSS 水平和垂直居中方法【 3 CSS3】： 和上面方法2的原理一样
.pop-main {
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}*/

/*CSS 水平和垂直居中方法【 4 推荐】：将要设置居中的元素上 、右、下、左 都设为0，再将margin值设为水平垂直居中
.pop-main {
	top:0px;
	right:0px;
	bottom:0px;
	left:0px;
	margin:auto;
}*/


                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：2.0.0

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
CSS、JS 使DIV水平 和 垂直居中的各种方法

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
前言：
    在Web开发中，固定高宽的div在网页中垂直居中很简单，相信大家也很容易的写出来，但是不是固定高宽的div如何垂直居中呢？我们在网页布局，特别是手机等web端网页经常是不固定高宽的div。
    在这里，我总结出一些在工作中用到过的方法，和大家一起分享，疏漏之处，欢迎指导！
代码说明：
/*一，CSS元素的居中方法*/
.要设置居中的元素 {position:absolute; width:400px; height:200px; }
/*CSS 水平和垂直居中【方法1  CSS3】：  将父级元素设为盒子模型，使子元素水平垂直居中。 */
.pop-win{ display: flex; justify-content: center; align-items: center;}
/*CSS 水平和垂直居中【方法2 CSS2】： 将要设置居中的元素分别向 下 和 向 右 各偏移50%，再将margin值设为 负的 元素本身的宽高咸半*/
.pop-main{ top: 50%; left: 50%; margin-top: -100px; margin-left: -200px;}
/*CSS 水平和垂直居中【方法3 CSS3】： 和上面方法2的原理一样*/
.pop-main{ top: 50%; left: 50%;  transform: translate(-50%, -50%); }
/*CSS 水平和垂直居中【方法4 推荐】：将要设置居中的元素上 、右、下、左 都设为0，再将margin值设为水平垂直居中*/
.pop-main{ top: 0px; right: 0px; bottom: 0px; left: 0px; margin: auto;}
/*二、JS元素的居中方法*/
有时候，想要居中元素是通过js代码动态生成的，用js，同样可以使元素水平和垂直居中。
window.onload = function() {
    var oMain = document.querySelector('#pop-main');
    oMain.style.position = 'absolute';
    //JS 水平居中方法： 将浏览器可视区的宽度(clientWidth) -减去 要居中元素本身的宽度(offsetWidth) /除以 2 +'px'
    oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 +'px';
    //JS 垂直居中方法： 将浏览器可视区的高度(clientHeight) -减去 要居中元素本身的高度(offsetHeight) /除以 2 +'px'
    oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 +'px';
}

                         

                     

                   
                


                
2



  
    
      
    
    

     

            
    
              
    
              
      
                
       macyoyo0
      
                
       2017/7/24 16:27:43
      
                
      
              
    
              
      
                
      可惜不能实时刷新
      
                
                        
        
                          
        
                              
        
                               
          
                                   
           沐枫自然1
          
                                   
           2017/8/15 23:37:42
          
                                   
          
  						        
        
                               
          
                                  
          @ macyoyo 实现 实时刷新，可以用js 去监听浏览器窗口大小被改变时，重新定位即可，由于上面的代码是之前我发出的代码不能编辑，现在我把实现 实时刷新（更新定位）的代码如下：
          注：将以下js代码直接替换上面Js栏中的代码即可：
          window.onload = function() {
	var oMain = document.querySelector('#pop-main');
	(function(doc, win) {
		var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
			recalc = function() {
				console.log('窗口大小被改变啦。。。');
				oMain.style.left = (document.documentElement.clientWidth - oMain.offsetWidth) / 2 + 'px';
				oMain.style.top = (document.documentElement.clientHeight - oMain.offsetHeight) / 2 + 'px';
			};
		if(!doc.addEventListener) {
			return false;
		}
		win.addEventListener(resizeEvt, recalc, false);
		doc.addEventListener('DOMContentLoaded', recalc, false);
	})(document, window);
};
          
                                
        
                           
        
                        
      
                    
                回复