关于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 }