html水平垂直居中

2014-12-15

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;
 }

（通过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;
}

2.居中元素

1 <div class="wrap">
2     <span></span>
3 </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使内嵌支持宽高

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下面不支持宽度*/
}