最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便，0.0~~
1.居中文本
1 <div class="wrap">2 我在中间……3 </div>
1.1. height+line-height+text-center（只能居中单行）
1 .wrap{2 width:200px; 3 height:200px;4 border:1px solid red; 5 text-align: center;6 line-height: 200px;7 }ps:text-align:center只是将元素下面的内联元素居中显示
1.2display:table-cell(多行固定高度居中)
1 .wrap{2 width:200px; 3 height:200px;4 border:1px solid red; 5 text-align: center; 6 display:table-cell; 7 vertical-align: middle;8 }display:table-cell：ie67不管用,最好配合display:table;一起用ie67下：（以后也不用了，不过也放这儿吧）方法一：（通过em标签高度与父级等高，所以span和em居中就相当于span在父级居中）
1 <div class="wrap">2 <span>3 我在中间…… 我在中间…… 我在中间…… 我在中间……4 </span>5 <em></em>6 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 border:1px solid red; 5 text-align: center; 6 } 7 .wrap span{ 8 vertical-align: middle; 9 display:inline-block; 10 width:180px;11 }12 .wrap em{13 height:100%;14 vertical-align: middle; 15 display:inline-block;16 }方法二：（通过给子元素增加一个绝对定位的父级标签，再配合子元素的相对定位水平垂直居中）
1 <div class="wrap">2 <span class="span1">3 <span class="span2">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>4 </span>5 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 border:1px solid red; 5 display:table; 6 position:relative; 7 overflow: hidden; 8 } 9 .wrap .span1{10 display:table-cell; 11 vertical-align: middle; 12 text-align: center;13 *position:absolute;14 top:50%;15 left:50%;16 }17 .wrap .span2{18 *position:relative;19 top:-50%;20 left:-50%;21 }1.3padding（内填充，不用多说）
1 .wrap{2 width:200px;3 border:1px solid red;4 padding:50px 0;5 }2.居中元素
1 <div class="wrap">2 <span></span>3 </div>
2.1position:absolute+margin负值（必须要有宽高，才能计算margin）
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red;10 }11 .wrap span{ 12 width:80px; 13 height:80px; 14 background:red;15 position: absolute; 16 top:50%; 17 left:50%; 18 margin-top:-40px; 19 margin-left:-40px;20 }ps:position:absolute/fixed使内嵌支持宽高
2.2Position:absolute+margin:auto
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red;10 }11 .wrap span{ 12 width:80px; 13 height:80px; 14 background:red;15 position: absolute; 16 top:0;17 right:0;18 bottom:0;19 left:0;20 margin:auto;21 }2.3position负值
1 <div class="wrap">2 <span class="span1">3 <span class="span2">fds</span>4 </span>5 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 }11 .wrap .span1{12 position:absolute;13 top:50%;14 left:50%;15 width:80px;16 height:80px;17 }18 .wrap .span2{ 19 width:80px;20 height:80px;21 display:block;22 line-height:80px;23 text-align:center;24 background:red; 25 position:relative;26 top:-50%;27 left:-50%;28 }2.4transform: translate(-50%,-50%);(translate相对于自己偏移，不考虑兼容性的情况下，这个方法很好)
1 <div class="wrap">2 <span >fds</span>3 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red;10 }11 .wrap span{ 12 width:80px;13 height:80px;14 background:red;15 position:absolute;16 top:50%;left:50%;17 -webkit-transform: translate(-50%,-50%);18 -ms-transform: translate(-50%,-50%);19 -o-transform: translate(-50%,-50%);20 transform: translate(-50%,-50%);21 } 2.5并行一个标签
1 <div class="wrap">2 <span></span>3 <em></em>4 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 text-align: center;11 }12 .wrap span{13 width:80px;14 height:80px;15 background:red;16 display:inline-block; 17 vertical-align: middle;18 } 19 .wrap em{20 height:100%;21 vertical-align:middle; 22 display:inline-block;23 }2.6display：table和display：table-cell
1 <div class="wrap">2 <div>3 <span></span>4 </div>5 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 display:table;11 }12 .wrap div{13 display:table-cell;14 vertical-align: middle;15 text-align: center;16 }17 .wrap span{ 18 width:80px;19 height:80px;20 background:red; 21 display:inline-block;22 } 2.7display:box
1 <div class="wrap">2 <span >fds</span>3 </div>
1 .wrap{ 2 width:200px; 3 height:200px; 4 position:absolute; 5 top:50%; 6 left:50%; 7 margin-top:-101px; 8 margin-left:-101px; 9 border:1px solid red; 10 display: -webkit-box;11 -webkit-box-pack:center;12 -webkit-box-align:center;13 }14 .wrap span{15 width:80px;16 height:80px;17 background:red;18 display:block;19 }3.居中浮动元素
1 <div class="wrap">2 <ul>3 <li>fdasfd</li>4 <li>fdsfds</li>5 <li>fdfds</li>6 </ul>7 </div>
1 .wrap{ 2 width:800px; 3 height:200px; 4 margin:200px auto; 5 border:1px solid red; 6 position:relative; 7 overflow: hidden; 8 } 9 .wrap ul{10 float: left; 11 position: relative; 12 left:50%;13 top:50%; 14 border:1px solid red; 15 height:100px; 16 }17 .wrap li{18 float: left; 19 width:100px; 20 height:100px; 21 background:red; 22 position: relative; 23 left:-50%;24 top:-50%; 25 margin-left:10px; 26 list-style: none; 27 _display:inline; /*ie6双边距*/28 *overflow: hidden;/*ie7下面不支持宽度*/29 }
