垂直水平居中 一、position+transform

     
     
     
      方法1        
      
            
       
        弹出窗标题
       
            
       
                        微信开发者大会（北京）的成功举办，引起业界的极大关注。                应广大微信开发者的强列要求，深圳微信开发者大会也在如火如荼的筹备中。                本文总结了技术团队不应错过2014年深圳微信开发者大会的十个理由                    
       
        
      
     
     

 

二、flex

     
     
      方法2        
      
                
       
深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，                在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。                
                
       
正进行微信开发的开发团队（开发者）、有兴趣或即将投身于微信开发的开发者、                想开发相关微信应用正努力寻找微信开发团队的传统IT企业，该会将是你不容错过的学习借鉴成功研发经验、寻找合作的大好机会。                
                
       
如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。                
        
      
     
     

 

三、:after{display:inline-block;height:100%;vertical-aligin:middle;}

     
     
      方法3        
      
                
       
深圳站依旧秉承“演讲从实践出发、听众从中受益”的原则，                在保持北京站特色之余，针对微信开发的新情况重新设置了议程，内容源于实践又富于启发性。                
                
       
如果你还在犹豫，可以仔细阅读一下主办方总结的技术团队不应错过2014年微信开发者大会深圳站的十个理由。                
        
      
     
     

 

四、table-cell

     
     
      
     
.box{     display:table;}span{     display:table-cell;     text-aligin:center;     vertical-aligin:middle}

 

五、position+margin

#ele{    position:absolute;    top:0;    left:0;    bottom:0;    right:0;    margin；auto;  }

 

 

注：已经宽高的div可以用

.mydiv{width:300px;height:200px;position:absolute;left:50%;top:50%;margin:-100px00-150px}

这里不能用margin:-50%，是因为margin百分数是相对于父元素的width

 

水平居中（ul中嵌套li）

一、float+position

浮动方案是比较难理解的，详细内容可以阅读 写的《 》一文。

.pagination {  float: left;  width: 100%;  overflow: hidden;  position: relative;}.pagination ul {  clear: left;  float: left;  position: relative;  left: 50%;/*整个分页向右边移动宽度的50%*/}.pagination li {  display: block;  float: left;  position: relative;  right: 50%;/*将每个分页项向左边移动宽度的50%*/}

 

这里简单介绍一下主要步骤：

没有浮动的div：可以看到宽度为100%。

向左边浮动的div：宽度由div中的内容决定（除非显示设置宽度）。

标准左对齐的菜单：使用浮动将导航浮动到左边，每个分页项也浮动。

向右移动ul：设置ul的position:relative属性，并且向右移动50%（left: 50%）。

向左移动ul中的所有li：在li上也设置position:relative属性，同时向左移动50%（right: 50%）。

通过以上步骤就可以达到我们想要的效果了。

优点：兼容性强，扩展性也比较好；

缺点：实现原理较复杂。

二、绝对定位+相对定位

这种方案实际是浮动方案的修改版。

.pagination {  position: relative;}.pagination ul {  position: absolute;  left: 50%;}.pagination li {  float: left;  position: relative;/*注意，这里不能是absolute*/  right: 50%;}

 这里解释一下为什么不能用position:absolute，absolute是相对定位父级重新定位，而relative是相对其原来位置

优点：扩展性强，兼容性强;

缺点：理解性难。