关于html水平垂直居中的一些总结吧_html/css_WEB-ITnose

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 }