关于html水平垂直居中的一些总结吧

html水平垂直居中

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

 <div class="wrap">
       我在中间……
 </div>

1.1. height+line-height+text-center（只能居中单行）

 .wrap{
     width:200px;
     height:200px;
     border:1px solid red;
     text-align: center;
     line-height: 200px;
 }

ps:text-align:center只是将元素下面的内联元素居中显示

1.2display:table-cell(多行固定高度居中)

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

display:table-cell：ie67不管用,最好配合display:table;一起用
ie67下：（以后也不用了，不过也放这儿吧）
方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中）

 <div class="wrap">
    <span>
        我在中间…… 我在中间…… 我在中间…… 我在中间……
    </span>
    <em></em>
 </div>

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

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

 <div class="wrap">
     <span class="span1">
        <span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
     </span>
 </div>

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

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

 .wrap{
     width:200px;
     border:1px solid red;
     padding:50px 0;
 }

2.居中元素

 <div class="wrap">
     <span></span>
 </div>

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

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
 }
 .wrap span{
     width:80px;
     height:80px;
     background:red;
     position: absolute;
     top:50%;
     left:50%;
     margin-top:-40px;
     margin-left:-40px;
 }

ps:position:absolute/fixed使内嵌支持宽高

2.2Position:absolute+margin:auto

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
 }
 .wrap span{
     width:80px;
     height:80px;
     background:red;
     position: absolute;
     top:;
     right:;
     bottom:;
     left:;
     margin:auto;
 }

2.3position负值

 <div class="wrap">
     <span class="span1">
        <span class="span2">fds</span>
     </span>
 </div>

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
 }
 .wrap .span1{
     position:absolute;
     top:50%;
     left:50%;
     width:80px;
     height:80px;
 }
 .wrap .span2{
     width:80px;
     height:80px;
     display:block;
     line-height:80px;
     text-align:center;
     background:red;
     position:relative;
     top:-50%;
     left:-50%;
 }

2.4transform: translate(-50%,-50%);(translate相对于自己偏移，不考虑兼容性的情况下，这个方法很好)

 <div class="wrap">
        <span >fds</span>
 </div>

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
 }
 .wrap span{
     width:80px;
     height:80px;
     background:red;
     position:absolute;
     top:50%;left:50%;
     -webkit-transform: translate(-50%,-50%);
     -ms-transform: translate(-50%,-50%);
     -o-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
 } 

2.5并行一个标签

 <div class="wrap">
    <span></span>
    <em></em>
 </div>

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
     text-align: center;
 }
 .wrap span{
     width:80px;
     height:80px;
     background:red;
     display:inline-block;
     vertical-align: middle;
 }
 .wrap em{
     height:100%;
     vertical-align:middle;
     display:inline-block;
 }

2.6display：table和display：table-cell

 <div class="wrap">
     <div>
         <span></span>
     </div>
 </div>

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
     display:table;
 }
 .wrap div{
     display:table-cell;
     vertical-align: middle;
     text-align: center;
 }
 .wrap span{
     width:80px;
     height:80px;
     background:red;
     display:inline-block;
 } 

2.7display:box

 <div class="wrap">
     <span >fds</span>
 </div>

 .wrap{
     width:200px;
     height:200px;
     position:absolute;
     top:50%;
     left:50%;
     margin-top:-101px;
     margin-left:-101px;
     border:1px solid red;
     display: -webkit-box;
     -webkit-box-pack:center;
     -webkit-box-align:center;
 }
 .wrap span{
     width:80px;
     height:80px;
     background:red;
     display:block;
 }

3.居中浮动元素

 <div class="wrap">
      <ul>
          <li>fdasfd</li>
          <li>fdsfds</li>
          <li>fdfds</li>
      </ul>
 </div>

 .wrap{
     width:800px;
     height:200px;
     margin:200px auto;
     border:1px solid red;
     position:relative;
     overflow: hidden;
 }
 .wrap ul{
     float: left;
     position: relative;
     left:50%;
     top:50%;
     border:1px solid red;
     height:100px;
 }
 .wrap li{
     float: left;
     width:100px;
     height:100px;
     background:red;
     position: relative;
     left:-50%;
     top:-50%;
     margin-left:10px;
     list-style: none;
     _display:inline; /*ie6双边距*/
     *overflow: hidden;/*ie7下面不支持宽度*/
 }