关于html水平垂直居中的一些总结吧
html水平垂直居中
最近遇到很多居中的问题，就花点时间总结了一下放在这里，以后找也方便，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 }
