html水平垂直居中的问题

最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便

1.居中文本

      我在中间……

.. height+line-height+text-center（只能居中单行）
.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center;
    line-height: px;
}

ps:text-align:center只是将元素下面的内联元素居中显示
1.2display:table-cell(多行固定高度居中)

.wrap{
    width:px; 
    height:px;
    border:px solid red; 
    text-align: center; 
    display:table-cell; 
    vertical-align: middle;
}

display:table-cell：ie67不管用,最好配合display:table;一起用

ie67下：（以后也不用了，不过也放这儿吧）
方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中） 

   
       我在中间…… 我在中间…… 我在中间…… 我在中间……
   
   

 .wrap{
     width:px; 
     height:px;
     border:px solid red; 
     text-align: center;
 }
 .wrap span{
     vertical-align: middle;
     display:inline-block; 
    width:px;
}
.wrap em{
    height:%;
    vertical-align: middle; 
    display:inline-block;
}

方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中） 

立即学习“前端免费学习笔记（深入）”；

    
       我在中间…… 我在中间…… 我在中间…… 我在中间……
    

 .wrap{
     width:px; 
     height:px;
     border:px solid red;
     display:table;
     position:relative; 
     overflow: hidden;
 }
 .wrap .span{
    display:table-cell; 
    vertical-align: middle; 
    text-align: center;
    *position:absolute;
    top:%;
    left:%;
}
.wrap .span{
    *position:relative;
    top:-%;
    left:-%;
}

1.3padding（内填充，不用多说）

行业贸易网站管理系统 2007 Beta 1

1.修正BUG站用资源问题,优化程序2.增加关键词搜索3.修改报价4.修正BUG 水印问题5.修改上传方式6.彻底整合论坛,实现一站通7.彻底解决群发垃圾信息问题。注册会员等发垃圾邮件7.彻底解决数据库安全9.修改交易方式.增加网站担保,和直接交易两中10.全站可选生成html.和单独新闻生成html(需要装组建)11. 网站有10中颜色选择适合不同的行业不同的颜色12.修改竞价格排名方式13.修

下载

.wrap{
    width:px;
    border:px solid red;
    padding:px ;
}

2.居中元素

2.1position:absolute+margin负值（必须要有宽高，才能计算margin）

 .wrap{
     width:px; 
     height:px;
     position:absolute; 
     top:%; 
     left:%; 
     margin-top:-px; 
     margin-left:-px;
     border:px solid red;
}
.wrap span{ 
    width:px; 
    height:px; 
    background:red;
    position: absolute; 
    top:%; 
    left:%; 
    margin-top:-px; 
    margin-left:-px;
}

ps：CSS实现p水平居中和上下垂直居中

  
  
  
  
  
  
  
  
   
p水平居中和上下垂直居中pCSS5
  
  

水平垂直居中原理介绍
这里使用了绝对定位position:absolute，使用left和top设置对象距离上和左为50%，但如果设置50%，实际上盒子是没有实现居中效果，所以又设置margin-left:-200px;margin-top:-100px;，这里有个技巧是，margin-left的值是宽度一半，margin-top的值也是对象高度一半，同时设置为负，这样就实现了水平和垂直居中。

更多html水平垂直居中的问题相关文章请关注PHP中文网！